如何在浏览器中获得相同的<input type =“ color”>值更改功能?

布莱恩·泽利普(Brian Zelip)

我正在开发一个Web应用程序,当用户从中选择颜色时,该应用程序将使用javascript在页面上执行某些操作<input type="color">

问题是<input type="color">在Chrome,Firefox和Safari上的行为有所不同:

  • 在Safari上,当用户单击时<input type="color">不会弹出外部拾色器窗口
  • 在Firefox上,会弹出一个外部颜色选择器控制窗口,但是input仅当1)发生值更改,以及2)随后随后关闭颜色选择器窗口在Mac上为EDIT ... )时,元素的值才会更改(在Mac上为…)用户必须单击“确定”按钮以确认值更改,而不仅仅是关闭窗口)

Chrome的行为非常理想:

  • 单击时,将<input type="color">提供一个颜色选择器弹出窗口
  • 每当在colorpicker弹出窗口中input更改值时元素的值都会更改(colorpicker窗口关闭之前)

这是一个带有香草味的代码笔,<input type="color">当在所有3个浏览器上进行检查时,都可以证明此问题。

如何使用JavaScript和/或CSS<input type="color">从Firefox和Safari中获取Chrome行为?

编辑有关Safari疯狂的事情是,他们的文件说,该color输入类型是:

用于指定RGB颜色值的输入控件。用户可以从颜色井中选择一种颜色

恩波

恐怕我们还没有在开发中使用这种输入类型。最好的解决方案是使用跨浏览器插件。

您可以在http://caniuse.com/#search=color上看到对color元素的支持。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何捕捉@Input值更改

来自分类Dev

如何检查浏览器是否支持<input type =“ time” />

来自分类Dev

如何更改 <input type ="file"> 样式更改

来自分类Dev

将<input type =“ image”>转换为<input type =“ button”>,但保持相同的功能

来自分类Dev

如何在Pupeteer中定位多个相同的“ input [type =“ file”]“?

来自分类Dev

IE11浏览器中的<input type =“ file”>定位问题

来自分类常见问题

在移动Web浏览器中使用input [type ='file']捕获照片后,如何在画布上以正确的方向绘制照片?

来自分类Dev

如何更改文件输入表单或“ input type ='file'”显示的文本

来自分类Dev

当浏览器中的值更改时,如何刷新django管理表单?

来自分类Dev

如何在Chrome浏览器中为<input>使用`:: selection`?

来自分类Dev

如何在Chrome浏览器中为<input>使用`:: selection`?

来自分类Dev

如何获得DIV忽略浏览器更改

来自分类Dev

Blazor服务器端-子功能中的值更改未更新UI

来自分类Dev

当input type = number时,Android浏览器将输入框缩小

来自分类Dev

如果使用标签 <input type='number'...> 浏览器会拒绝非数字输入吗?

来自分类Dev

如何在浏览器中的 R Shiny 中更改 Leaflet 中的光标

来自分类Dev

具有延迟功能的输入触发器,如果输入值更改,请等待

来自分类Dev

Cookie值更改,进入浏览器后

来自分类Dev

使用jQuery更改浏览器中的后退按钮功能

来自分类Dev

使用jQuery更改浏览器中的后退按钮功能

来自分类Dev

如何在.NET Framework中更新浏览器功能的定义?

来自分类Dev

如何在表单标签或所有输入中忽略谷歌浏览器自动填充功能

来自分类Dev

如何将谷歌浏览器中的默认浏览器搜索更改为实际的谷歌浏览器?

来自分类Dev

如何在浏览器中更改“文件上传”对话框的标题?

来自分类Dev

如何在Parse.com Web浏览器界面中更改现有类的列名?

来自分类Dev

如何在新的浏览器中隐藏或更改鼠标光标?

来自分类Dev

如何在浏览器中更改简单长方形/线条的长度,厚度和曲率?

来自分类Dev

如何在Windows任务面板中更改Google Chrome浏览器窗口顺序

来自分类Dev

如何在Windows 7中将默认浏览器更改为未列出的程序?

Related 相关文章

  1. 1

    如何捕捉@Input值更改

  2. 2

    如何检查浏览器是否支持<input type =“ time” />

  3. 3

    如何更改 <input type ="file"> 样式更改

  4. 4

    将<input type =“ image”>转换为<input type =“ button”>,但保持相同的功能

  5. 5

    如何在Pupeteer中定位多个相同的“ input [type =“ file”]“?

  6. 6

    IE11浏览器中的<input type =“ file”>定位问题

  7. 7

    在移动Web浏览器中使用input [type ='file']捕获照片后,如何在画布上以正确的方向绘制照片?

  8. 8

    如何更改文件输入表单或“ input type ='file'”显示的文本

  9. 9

    当浏览器中的值更改时,如何刷新django管理表单?

  10. 10

    如何在Chrome浏览器中为<input>使用`:: selection`?

  11. 11

    如何在Chrome浏览器中为<input>使用`:: selection`?

  12. 12

    如何获得DIV忽略浏览器更改

  13. 13

    Blazor服务器端-子功能中的值更改未更新UI

  14. 14

    当input type = number时,Android浏览器将输入框缩小

  15. 15

    如果使用标签 <input type='number'...> 浏览器会拒绝非数字输入吗?

  16. 16

    如何在浏览器中的 R Shiny 中更改 Leaflet 中的光标

  17. 17

    具有延迟功能的输入触发器,如果输入值更改,请等待

  18. 18

    Cookie值更改,进入浏览器后

  19. 19

    使用jQuery更改浏览器中的后退按钮功能

  20. 20

    使用jQuery更改浏览器中的后退按钮功能

  21. 21

    如何在.NET Framework中更新浏览器功能的定义?

  22. 22

    如何在表单标签或所有输入中忽略谷歌浏览器自动填充功能

  23. 23

    如何将谷歌浏览器中的默认浏览器搜索更改为实际的谷歌浏览器?

  24. 24

    如何在浏览器中更改“文件上传”对话框的标题?

  25. 25

    如何在Parse.com Web浏览器界面中更改现有类的列名?

  26. 26

    如何在新的浏览器中隐藏或更改鼠标光标?

  27. 27

    如何在浏览器中更改简单长方形/线条的长度,厚度和曲率?

  28. 28

    如何在Windows任务面板中更改Google Chrome浏览器窗口顺序

  29. 29

    如何在Windows 7中将默认浏览器更改为未列出的程序?

热门标签

归档