Question

使用type = color：

的输入选择颜色时，在OSX上使用chrome

<input name="color" type="color" />

即使选择了颜色，颜色选择器也会保持打开状态。即使您重新加载页面，它也会保持打开状态。

如何在选择颜色时关闭此选择器弹出窗口？

Answer 1

颜色选择器在很大程度上取决于每个浏览器，每个平台的实现。技术上没有办法以编程方式关闭颜色选择器作为跨浏览器解决方案。

您可以使用Javascript解决方案来渲染您自己的跨平台颜色选择器，例如jscolor或类似的，甚至可以提供适当的触摸支持。

修改：In this list您可以看到close中没有input type="color"个事件。进一步阅读告诉我，由于这只是一个输入，如文本输入或范围输入，它不是你可以“控制”的东西。替代方案可能是创建自己的。

Answer 2

这是一个老问题，我偶然发现了同样的答案。我最终通过将type属性翻转为'text'，然后又回到'color'，得到了预期的效果。

我想分享一下，以防其他人跌入同一篇文章。

// vanilla JS:
input.setAttribute('type','text');
input.setAttribute('type','color');

// jQuery:
$input.attr('type','text').attr('type','color');

// see it in action!

var input = document.getElementById('my-color');

// when you click the color picker, we'll run our code to close it after 2 seconds.
input.addEventListener('focus', function() {
  setTimeout(()=>{
  
    // toggle the type attribute to close the picker!
    input.setAttribute('type','text');
    input.setAttribute('type','color');
    
  }, 2000);
});

<input type="color" value="#ffaacc" id="my-color"/> <- Click me

如何关闭html5颜色选择器？

2 个答案: