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

Posted 2023-02-16

【中文标题】使用 JQuery 触发点击 HTML 5 颜色选择器

【英文标题】：Trigger click on HTML 5 color picker with JQuery

【发布时间】：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.***.com"> Go! </a>，jQuery 不会触发点击。

@adeneo 是，如果删除 "display:none;"它有效。

@roasted 用户确实在单击文档。我有一个 div 元素，用户必须点击它才能打开颜色选择器。

【参考方案1】：

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

DEMO

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

【讨论】：

感谢您的回答。因此，我们可以通过将元素放置在用户看不到的地方来获得相同的结果，而不是将“显示”属性设置为“无”......

没错，使用绝对位置，例如

也可以使用jQuery。我只是按照您的指示更改了样式属性，它开始工作了。

【参考方案2】：

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

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

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

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

https://jsfiddle.net/Lnzm0sry/2/

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

【参考方案3】：

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

例如：

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

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