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

EN

color类型的input的定位是特定于浏览器的实现，在official documentation中，没有针对用户代理(即浏览器)如何将其定位在页面元素之上的给定规则。例如，这使得通过CSS或JavaScript进行自定义定位成为不可能。

但是，还有一些其他规则(例如，always a颜色拾取，并且无法将该值设置为空字符串。)

请记住，在使用color类型的input时，Internet Explorer和Safari浏览器还不支持它。

我也有同样的问题。我想创建一个主题编辑器，并想这样做。就像编辑CSS文件时的VS代码一样。我想出了一些解决这个问题的策略：

方法A使用定位的iframe，并用信号通知iframe和父对象之间的变化。

1. 计算出您希望选择器打开的绝对屏幕位置。
2. 创建一个
3. 将带有绝对位置和大小的隐藏
4. 在iframe中设置初始颜色的颜色，然后显示div。
5. 使用以下帖子来确定何时发出新颜色的信号或是否取消。https://lugolabs.com/articles/how-to-use-a-color-picker-in-javascript

使用window.open(…)的方法B+ Ajax

1. 计算出你想让你的选取器open.
2. Generate一个随机的令牌文件名的绝对屏幕位置。
3. 打开一个具有所需位置和大小的新窗口，加载到你需要的超文本标记语言中。在脚本中嵌入令牌文件名并传递将要使用的ajax凭据。在父DOM中创建一个循环来检测窗口何时关闭。
4. 当操作员点击一个新的选择时检测点击并捕获新的颜色值。
5. 发送一个带有新颜色的ajax消息到主机。保存令牌文件中的值。
6. 然后关闭窗口，这将触发父级使用ajax请求令牌文件。