<input type =“color”/> - 用js打开colorpicker

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

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

＆＃13;

＆＃13;

@IBAction func myButton(_ sender: UIButton) {
    myLabel.isHidden = false

＆＃13;

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

＆＃13;

.btn-invisible {
   display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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