<input type="color" /> — 用 js 打开颜色选择器答案

【问题标题】：<input type="color" /> — open colorpicker with js<input type="color" /> — 用 js 打开颜色选择器
【发布时间】：2017-09-21 06:20:51
【问题描述】：

我知道了：

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

我想使用 JS 打开该字段的颜色选择器。我试过了：

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').focus()
  );

但这不会打开颜色选择器。如果JS能做到，那怎么做？

【问题讨论】：

【解决方案1】：

不需要 javascript，只需在输入周围加上标签即可：

<label>
  Open
  <input type="color" style="display:none">
</label>

【讨论】：

【解决方案2】：

颜色输入控件需要单击（如按钮）。

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').click()
  );

.btn-invisible {
   display: none;
}

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

【讨论】：

不知道此类表单元素上的 .click() 方法，但它的作用就像魅力一样，谢谢！
虽然它可以在 Edge 中使用，但如果您在单击之前聚焦输入 (.focus()) 并轻轻隐藏它（例如 opacity: 0）。游乐场：jsbin.com/vejuqif/edit