jquery - 使用 JQuery 触发点击 HTML 5 颜色选择器

Question

在 JQuery 中，我们可以通过以下方式触发任何给定元素的“点击”：

$(selector).trigger('click');

虽然当元素是 HTML 5 颜色选择器并且 CSS 将“显示”属性设置为“无”时，我很难这样做。

通常，如果输入类型是“文件”或...

那么有没有办法用 JQuery 或纯 javascript 来完成这项工作？

HTML 元素

input type="color" id="fontSel" style="display: none;"
div id="fontWrap"

jQuery

$("#fontWrap").click(function(){
     $("#fontSel").trigger("click");
});

回答

将样式更改为：

input type="color" id="fontSel" style="position:absolute; left:-9999px; top:-9999px;"

score 10 · Accepted Answer

这需要用户交互，这意味着如果没有用户单击文档中的某个位置，您将无法触发它：

$("#fontWrap").click(function () {
    $("#fontSel")[0].click();
});

score 3 · Accepted Answer

接受的答案的替代方法是使用label标签并让浏览器为您完成工作。

例如：

<input type="color" id="my-color" style="opacity: 0; visibility: hidden; position: absolute;">

<label for="my-color">Click here</label>

score 0 · Accepted Answer

接受的答案效果很好，除了它在 MS Edge 中不起作用（我个人不太喜欢它，但截至 2017 年它仍然是 6% 的市场份额，这意味着您网站的每 15 个访问者都有它）

所以这是一个适用于所有浏览器的古老的“hover-hack”技巧：

<input type="color" style='opacity:0;width:100px;position:absolute;'/>
<button>clickme</button>

然后绑定onchange到颜色元素以获取选定的值。试验布局的宽度/高度。

PS。我知道这是“hacky”，但我没有更好的主意。

3 回答 3