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

Question

我已经得到了：

<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可以实现的话，怎么实现呢？

Answer 1

不需要 JavaScript，只需在输入周围包裹一个标签即可：

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