使用 JQuery 触发点击 HTML 5 颜色选择器答案

【问题标题】：Trigger click on HTML 5 color picker with JQuery使用 JQuery 触发点击 HTML 5 颜色选择器
【发布时间】：2013-07-17 17:45:49
【问题描述】：

在 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;"

【问题讨论】：

你是说当输入可见时你能够触发点击？
只有当用户点击文档中的某处才能触发它
如果元素没有默认的点击功能，或者元素没有jQuery绑定的.click()事件，那么这将不起作用。如果是<a href="http://www.stackoverflow.com"> Go! </a>，jQuery 不会触发点击。
@adeneo 是，如果删除 "display:none;"它有效。
@roasted 用户确实在单击文档。我有一个 div 元素，用户必须点击它才能打开颜色选择器。

【解决方案1】：

这需要用户交互，这意味着除非用户点击文档中的某个位置，否则您无法触发它：

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

【讨论】：

【解决方案2】：

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

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

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

然后将onchange绑定到颜色元素，得到选中的值。尝试为您的布局设置宽度/高度。

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

【讨论】：

【解决方案3】：

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

例如：

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

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

【讨论】：