HTML 原生 input 标签实现调色板功能

使用 input 标签 type=‘color’属性调出浏览器的调色板，监听 input 事件实时获取取色值，将 input 标签隐藏以应用自定义样式。

<style>
  .palette {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background-color: #000;
  }
  input {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    height: 30px;
    width: 30px;
  }
</style>

<div class="palette">
  <input type="color" onChange="handleChange(event)" onInput="handleInput(event)" />
</div>

<script>
  const handleChange = (e) => {
    // 监听调色板展示/关闭
    console.log(e.target.value)
  }

  const handleInput = (e) => {
    // 监听颜色选择
    const color = e.target.value
    document.querySelector('.palette').setAttribute('style', `background-color:${color}`)
  }
</script>