4.5 自定义表单控件

4.5 自定义表单控件

自定义控件设计原则

1. 可访问性基础要求

• 键盘可操作：支持Tab导航和空间/回车激活
• ARIA属性：正确设置role、aria-*属性
• 标签关联：使用<label>或aria-labelledby
• 焦点管理：可见焦点样式和逻辑焦点顺序

2. 功能完整性标准

• 与原生表单相同的提交行为
• 支持表单验证API
• 保持与原生控件的属性/方法一致性
• 正确处理disabled状态

实现方案选择

方案1：基于原生控件扩展

<div class="enhanced-select">
  <select id="standard-select" class="visually-hidden">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
  <div class="custom-select" 
       tabindex="0"
       role="combobox"
       aria-haspopup="listbox"
       aria-expanded="false"
       aria-controls="custom-options">
    <span class="selected-value">选项1</span>
    <ul id="custom-options" role="listbox">
      <li role="option" data-value="1" aria-selected="true">选项1</li>
      <li role="option" data-value="2">选项2</li>
    </ul>
  </div>
</div>

<script>
  // 同步原生与自定义控件状态
  const nativeSelect = document.getElementById('standard-select');
  const customSelect = document.querySelector('.custom-select');
  
  customSelect.addEventListener('click', () => {
    const isExpanded = customSelect.getAttribute('aria-expanded') === 'true';
    customSelect.setAttribute('aria-expanded', !isExpanded);
  });
  
  document.querySelectorAll('[role="option"]').forEach(option => {
    option.addEventListener('click', (e) => {
      const value = e.target.dataset.value;
      nativeSelect.value = value;
      customSelect.querySelector('.selected-value').textContent = e.target.textContent;
      customSelect.setAttribute('aria-expanded', 'false');
    });
  });
</script>

方案2：完全自定义控件

<div class="custom-radio-group" role="radiogroup" aria-labelledby="color-label">
  <h3 id="color-label">选择颜色</h3>
  <div class="custom-radio" 
       tabindex="0"
       role="radio"
       aria-checked="true"
       data-value="red">
    <span class="radio-indicator"></span>
    <span>红色</span>
  </div>
  <div class="custom-radio" 
       tabindex="-1"
       role="radio"
       aria-checked="false"
       data-value="blue">
    <span class="radio-indicator"></span>
    <span>蓝色</span>
  </div>
</div>

<script>
  const radios = document.querySelectorAll('[role="radio"]');
  
  radios.forEach(radio => {
    radio.addEventListener('click', setChecked);
    radio.addEventListener('keydown', (e) => {
      if(e.key === ' ' || e.key === 'Enter') setChecked(e);
    });
  });
  
  function setChecked(e) {
    const radio = e.currentTarget;
    radios.forEach(r => {
      const isChecked = r === radio;
      r.setAttribute('aria-checked', isChecked);
      r.setAttribute('tabindex', isChecked ? '0' : '-1');
    });
    
    // 表单提交时收集数据
    document.querySelector('form').dataset.color = radio.dataset.value;
  }
</script>

表单集成策略

1. 隐藏原生表单数据

<form id="custom-form">
  <!-- 隐藏的原始字段 -->
  <input type="hidden" name="color" id="color-value">
  
  <!-- 自定义控件 -->
  <div class="color-picker">
    <div class="color-option" data-value="red"></div>
    <div class="color-option" data-value="blue"></div>
  </div>
  
  <button type="submit">提交</button>
</form>

<script>
  const form = document.getElementById('custom-form');
  const colorInput = document.getElementById('color-value');
  
  document.querySelectorAll('.color-option').forEach(option => {
    option.addEventListener('click', () => {
      colorInput.value = option.dataset.value;
    });
  });
  
  form.addEventListener('submit', (e) => {
    if(!colorInput.value) {
      e.preventDefault();
      alert('请选择颜色');
    }
  });
</script>

2. 使用FormData API扩展

// 扩展FormData以包含自定义控件值
HTMLFormElement.prototype.realSubmit = HTMLFormElement.prototype.submit;

HTMLFormElement.prototype.submit = function() {
  const formData = new FormData(this);
  
  // 添加自定义控件值
  const colorValue = this.querySelector('.color-picker .active').dataset.value;
  formData.append('color', colorValue);
  
  // 使用fetch提交
  fetch(this.action, {
    method: this.method,
    body: formData
  });
};

高级交互模式

1. 自定义范围选择器

<div class="custom-range" 
     role="slider"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="50"
     aria-label="音量控制"
     tabindex="0">
  <div class="track">
    <div class="thumb"></div>
  </div>
  <output class="value-display">50</output>
</div>

<script>
  const range = document.querySelector('.custom-range');
  const thumb = range.querySelector('.thumb');
  const output = range.querySelector('.value-display');
  let isDragging = false;
  
  // 鼠标交互
  thumb.addEventListener('mousedown', () => isDragging = true);
  document.addEventListener('mouseup', () => isDragging = false);
  document.addEventListener('mousemove', (e) => {
    if(!isDragging) return;
    updateValue(getPosition(e));
  });
  
  // 键盘交互
  range.addEventListener('keydown', (e) => {
    const step = 5;
    let value = parseInt(range.getAttribute('aria-valuenow'));
    
    if(e.key === 'ArrowRight') value += step;
    if(e.key === 'ArrowLeft') value -= step;
    
    value = Math.max(0, Math.min(100, value));
    updateValue(value);
  });
  
  function getPosition(e) {
    const rect = range.getBoundingClientRect();
    const pos = (e.clientX - rect.left) / rect.width;
    return Math.round(Math.max(0, Math.min(1, pos)) * 100);
  }
  
  function updateValue(value) {
    range.setAttribute('aria-valuenow', value);
    output.textContent = value;
    thumb.style.left = `${value}%`;
  }
</script>

2. 复合日期选择器

<div class="custom-datepicker">
  <input type="text" class="date-input" readonly
         aria-haspopup="dialog"
         aria-expanded="false"
         aria-label="选择日期">
  
  <div class="datepicker-dialog" role="dialog" aria-modal="true" hidden>
    <div class="header">
      <button class="prev-year" aria-label="上一年">«</button>
      <button class="prev-month" aria-label="上一月">‹</button>
      <span class="current-month" aria-live="polite">2023年11月</span>
      <button class="next-month" aria-label="下一月">›</button>
      <button class="next-year" aria-label="下一年">»</button>
    </div>
    
    <table role="grid">
      <thead>
        <tr>
          <th scope="col" abbr="周日">日</th>
          <th scope="col" abbr="周一">一</th>
          <!-- 其他星期 -->
        </tr>
      </thead>
      <tbody>
        <!-- 动态生成日期 -->
      </tbody>
    </table>
  </div>
</div>

<script>
  // 实现完整的日期选择逻辑
  class DatePicker {
    constructor(element) {
      this.dialog = element.querySelector('.datepicker-dialog');
      this.input = element.querySelector('.date-input');
      this.currentDate = new Date();
      
      this.initEvents();
      this.renderCalendar();
    }
    
    initEvents() {
      this.input.addEventListener('click', () => this.toggleDialog());
      document.addEventListener('click', (e) => {
        if(!element.contains(e.target)) this.closeDialog();
      });
      
      // 绑定导航按钮事件
      element.querySelector('.prev-year').addEventListener('click', () => {
        this.currentDate.setFullYear(this.currentDate.getFullYear() - 1);
        this.renderCalendar();
      });
      
      // 其他按钮事件...
    }
    
    renderCalendar() {
      // 实现日历渲染逻辑
    }
    
    toggleDialog() {
      const isOpen = !this.dialog.hidden;
      this.dialog.hidden = isOpen;
      this.input.setAttribute('aria-expanded', String(!isOpen));
    }
  }
  
  // 初始化所有日期选择器
  document.querySelectorAll('.custom-datepicker').forEach(picker => {
    new DatePicker(picker);
  });
</script>

样式与主题定制

1. 可定制设计系统

:root {
  --custom-control-primary: #6200ee;
  --custom-control-size: 16px;
  --custom-control-animation: 0.2s ease-in-out;
}

.custom-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: var(--custom-control-size);
  height: var(--custom-control-size);
}

.custom-checkbox .checkmark {
  width: var(--custom-control-size);
  height: var(--custom-control-size);
  border: 2px solid currentColor;
  transition: 
    background-color var(--custom-control-animation),
    border-color var(--custom-control-animation);
}

.custom-checkbox input:checked + .checkmark {
  background-color: var(--custom-control-primary);
  border-color: var(--custom-control-primary);
}

/* 高对比度模式支持 */
@media (forced-colors: active) {
  .custom-checkbox .checkmark {
    forced-color-adjust: none;
    border-color: ButtonText;
  }
  
  .custom-checkbox input:checked + .checkmark {
    background-color: Highlight;
    border-color: Highlight;
  }
}

2. 状态反馈设计

.custom-control {
  position: relative;
  padding-left: 2rem;
}

.custom-control input {
  position: absolute;
  left: -9999px;
}

.custom-control-indicator {
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #ddd;
}

/* 聚焦状态 */
.custom-control input:focus ~ .custom-control-indicator {
  box-shadow: 0 0 0 0.2rem rgba(98, 0, 238, 0.25);
  border-color: #6200ee;
}

/* 禁用状态 */
.custom-control input:disabled ~ .custom-control-indicator {
  opacity: 0.5;
  background-color: #eee;
}

/* 验证状态 */
.custom-control input:invalid ~ .custom-control-indicator {
  border-color: #dc3545;
}

性能优化策略

1. 虚拟滚动长列表

<div class="virtual-select">
  <input type="text" class="search-input" placeholder="搜索...">
  <div class="viewport" aria-live="polite">
    <!-- 可见项渲染 -->
    <div class="option" role="option" tabindex="-1">选项1</div>
    <div class="option" role="option" tabindex="-1">选项2</div>
  </div>
  <div class="scrollbar" aria-hidden="true"></div>
</div>

<script>
  class VirtualSelect {
    constructor(element) {
      this.container = element;
      this.viewport = element.querySelector('.viewport');
      this.options = Array(1000).fill().map((_, i) => `选项${i+1}`);
      this.visibleCount = 10;
      this.itemHeight = 40;
      
      this.renderVisibleItems();
      this.initEvents();
    }
    
    renderVisibleItems(startIndex = 0) {
      // 只渲染可见区域的选项
      const endIndex = Math.min(startIndex + this.visibleCount, this.options.length);
      this.viewport.innerHTML = '';
      
      for(let i = startIndex; i < endIndex; i++) {
        const option = document.createElement('div');
        option.className = 'option';
        option.textContent = this.options[i];
        option.style.transform = `translateY(${i * this.itemHeight}px)`;
        this.viewport.appendChild(option);
      }
      
      this.viewport.style.height = `${this.options.length * this.itemHeight}px`;
    }
    
    initEvents() {
      this.container.addEventListener('scroll', (e) => {
        const scrollTop = e.target.scrollTop;
        const startIndex = Math.floor(scrollTop / this.itemHeight);
        this.renderVisibleItems(startIndex);
      });
    }
  }
  
  new VirtualSelect(document.querySelector('.virtual-select'));
</script>

2. 延迟加载资源

<div class="lazy-control" data-src="/controls/color-picker.html">
  <!-- 占位内容 -->
  <div class="spinner"></div>
</div>

<script>
  document.querySelectorAll('.lazy-control').forEach(control => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          loadControl(entry.target);
          observer.unobserve(entry.target);
        }
      });
    });
    
    observer.observe(control);
  });
  
  function loadControl(element) {
    fetch(element.dataset.src)
      .then(res => res.text())
      .then(html => {
        element.innerHTML = html;
        initCustomControl(element);
      });
  }
</script>

测试与验证

1. 自动化测试策略

// 使用测试库验证自定义控件
describe('Custom Select', () => {
  let select;
  
  beforeAll(() => {
    document.body.innerHTML = `
      <div class="custom-select">
        <select class="native-select">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
        <div class="custom-ui"></div>
      </div>
    `;
    
    select = new CustomSelect(document.querySelector('.custom-select'));
  });
  
  test('should sync value with native select', () => {
    select.setValue('2');
    expect(document.querySelector('.native-select').value).toBe('2');
  });
  
  test('should be keyboard accessible', () => {
    const event = new KeyboardEvent('keydown', { key: 'ArrowDown' });
    document.querySelector('.custom-ui').dispatchEvent(event);
    expect(select.isOpen).toBeTruthy();
  });
});

2. 可访问性审计

// 使用axe-core进行可访问性测试
axe.run(document.querySelector('.custom-control'), (err, results) => {
  if(err) throw err;
  
  const violations = results.violations.filter(v => 
    v.impact === 'serious' || v.impact === 'critical'
  );
  
  if(violations.length > 0) {
    console.error('可访问性违规：', violations);
  } else {
    console.log('自定义控件通过可访问性检查');
  }
});

通过系统化地实现这些自定义表单控件，开发者可以在保持用户体验一致性的同时，突破原生控件的样式和功能限制。关键在于始终遵循可访问性原则，确保自定义控件对所有用户都可用，并通过完善的测试流程保证其稳定性和兼容性。