Javascript <；输入类型="；“颜色”/&燃气轮机—；用js打开颜色选择器

我知道：

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

---

但这并没有打开颜色选择器。如果JS可以做到这一点，如何实现？

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

document.querySelector（'span.opener'））
.addEventListener（'单击'，
e=>document.querySelector（'.btn不可见'）。单击（）
);
.btn不可见{
显示：无；
}
打开
颜色输入控件需要单击（如按钮）


document.querySelector（'span.opener'））
.addEventListener（'单击'，
e=>document.querySelector（'.btn不可见'）。单击（）
);
.btn不可见{
显示：无；
}
打开
不需要javascript，只需在输入周围加上一个标签：



打开
不需要javascript，只需在输入周围加上一个标签：



打开
为什么
。focus（）
而不是
。click（）
？为什么
的可能副本。focus（）
而不是
。click（）
？可能的副本尚未了解此类表单元素上的
方法。click（）
方法，但它工作起来很有魅力，谢谢！尽管它在Edge中工作，但如果您在单击（
.focus（）
）之前对输入进行聚焦并将其轻轻隐藏（例如
不透明度：0
）。操场：还不知道这种表单元素上的
。click（）
方法，但它很有魅力，谢谢！尽管它在Edge中工作，但如果您在单击（
.focus（）
）之前对输入进行聚焦并将其轻轻隐藏（例如
不透明度：0
）。操场：我会给它投篮！我要求一个JS解决方案，所以接受一个非JS解决方案是不对的，即使我现在更喜欢它而不是JS；）是的，我知道这不完全是你想要的，但我认为无论如何都值得指出：）。一般来说，最好避免让JS做不必要的工作。更多的事件听众=更多的意外后果的机会。我会给它射击！我要求一个JS解决方案，所以接受一个非JS解决方案是不对的，即使我现在更喜欢它而不是JS；）是的，我知道这不完全是你想要的，但我认为无论如何都值得指出：）。一般来说，最好避免让JS做不必要的工作。事件侦听器越多=发生意外后果的可能性越大。
document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').focus()
  );