<INPUT TYPE = 「顏色」/> - 開放的ColorPicker與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

顏色輸入控件需要點擊（如按鈕）。

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" />

Answer 2

沒有必要對JavaScript的，只是包裝標籤圍繞輸入：

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