HTML5中input怎么新增type属性color颜色拾取器

# HTML5中input怎么新增type属性color颜色拾取器

## 引言

HTML5作为现代Web开发的核心技术，为表单控件引入了多种新的`input`类型，极大丰富了用户交互体验。其中`type="color"`的加入让开发者能够轻松实现**颜色选择器**功能，无需依赖第三方JavaScript库。本文将深入解析这一特性的使用方法、兼容性处理及实际应用场景。

---

## 一、color类型的基本用法

### 1.1 基础语法
```html
<input type="color" id="colorPicker" name="favcolor">

<!-- 设置默认值 -->
<input type="color" value="#ff0000">

<!-- 禁用状态 -->
<input type="color" disabled>

const picker = document.getElementById('colorPicker');
picker.addEventListener('input', (e) => {
  document.body.style.backgroundColor = e.target.value;
});

:root {
  --theme-color: #ffffff;
}

picker.addEventListener('change', () => {
  document.documentElement.style.setProperty('--theme-color', picker.value);
});

// HEX转RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}

if (!Modernizr.inputtypes.color) {
  // 降级方案
  const fallback = document.createElement('input');
  fallback.type = 'text';
  fallback.className = 'color-fallback';
  colorPicker.parentNode.replaceChild(fallback, colorPicker);
}

// 处理表单提交时统一格式
$color = isset($_POST['favcolor']) ? 
         preg_replace('/[^a-f0-9#]/i', '', $_POST['favcolor']) : 
         '#000000';

<div class="toolbar">
  <input type="color" id="strokeColor" title="笔触颜色">
  <input type="color" id="fillColor" title="填充颜色">
</div>

// 保存到localStorage
function saveTheme(color) {
  localStorage.setItem('userTheme', color);
}

{
  "chartOptions": {
    "colorScheme": [
      "#colorPicker1",
      "#colorPicker2"
    ]
  }
}

ctx.fillStyle = colorPicker.value;
ctx.fillRect(0, 0, canvas.width, canvas.height);

<svg>
  <rect fill="currentColor" />
</svg>
<script>
  document.querySelector('rect').style.setProperty('--svg-color', picker.value);
</script>

class ColorPicker extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <input type="color">
    `;
  }
}
customElements.define('color-picker', ColorPicker);