如何定位通过HTML5的颜色输入打开的颜色选择器？

Question

今天我读了about HTML5's color input，我想我试一试：

＆＃13;

＆＃13;

<input type="color" name="background" id="background" value="#ff0000">

＆＃13;

＆＃13;

＆＃13;

当我点击输入（在chrome和firefox中，在Windows上）时，会出现一个颜色选择器。但是，它位于屏幕的左上角，而不是输入上方。

这是一个已知的问题，这是否会被修复＆＃39;在将来？是否可以通过代码定位颜色选择器？或者这是浏览器无法做多少事情以及用户必须忍受的东西？

Answer 1

类型input的{​​{1}}的定位是特定于浏览器的实现，在official documentation中没有针对用户代理（即浏览器）的给定规则如何定位它页面的元素。这样就可以通过CSS进行自定义定位，或者不可能使用JavaScript。

但是，还有一些其他规则（例如，总是选择了一种颜色，并且无法将值设置为空字符串。）

使用类型为color的{​​{1}}时请注意，Internet Explorer和Safari浏览器尚未支持它。

Answer 2

我有同样的问题。我想创建一个主题编辑器，并希望做到这一点。就像在编辑CSS文件时使用VS Code。 我想出了一些解决此问题的策略：

方法A使用定位的iframe并在iframe和父对象之间发出信号更改。

1. 找出您要打开选择器的绝对屏幕位置。
2. 创建一个
3. 将隐藏的
4. 设置iframe中初始颜色的颜色，然后显示div。
5. 使用以下信息找出何时发出新的颜色或是否被取消。 https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript

使用window.open（...）+ Ajax的方法B

1. 找出您要打开选择器的绝对屏幕位置。
2. 生成随机令牌文件名。
3. 打开一个具有所需位置和大小的新窗口，然后将其加载到所需的HTML中。在脚本中嵌入令牌文件名，并传递将要使用的ajax凭证。添加对JQuery的引用，等等。在父DOM中创建一个循环以检测窗口何时关闭。
4. 操作员单击新选择时，会检测到点击并捕获新的颜色值。
5. 将带有新颜色的ajax消息发送到主机。将值保存在令牌文件中。
6. 然后关闭窗口，然后该窗口触发父级使用ajax请求令牌文件。