一行 JS 打开屏幕拾色器

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1033 天前的主题，其中的信息可能已经有所发展或是发生改变。

open('','','width=1,height=1').document.write('<input type=color>')

点击颜色控件，点击钢笔图标，可在屏幕上取色。按空格可在圈圈中实时显示当前颜色。

当然远没有系统自带的方便~

拾色器

document

height

点击

7 条回复 • 2022-05-13 10:58:59 +08:00

nanvon

2022-01-25 14:09:51 +08:00

可以把代码加到 javascript （）内，添加到收藏夹

iMusic

2022-01-25 18:54:51 +08:00

哈哈哈简直棒呆了

muhuan

2022-01-26 08:08:55 +08:00 via iPhone

厉害

mscststs

2022-01-26 13:33:49 +08:00

```
javascript:(()=>{let d = document; let s=d.createElement("input");s.style="display:none";s.type="color";d.body.appendChild(s);s.click();s.oninput=(e)=>{navigator.clipboard.writeText(e.target.value);d.body.removeChild(s)};})();
```

添加到收藏夹，取色后自动拷贝到剪贴板。

仅在 Edge 上调试通过，其他浏览器不知道

iqoo

2022-01-27 11:36:19 +08:00

@mscststs 元素不用添加到文档，直接在内存里 click 就可以

let s = document.createElement('input')
s.type = 'color'
s.click()

iqoo

2022-01-27 11:39:15 +08:00

@mscststs 不过 chromium 的弹出的颜色面板没法拖动，取不到面板后面的颜色。所以才用 open 弹窗，面板可以跟随小窗口移动。

mscststs

2022-05-13 10:58:59 +08:00

对于 Edge > 95 和 Chrome > 95 ，亦可使用以下代码
```
javascript:(async ()=>{navigator.clipboard.writeText((await (new EyeDropper()).open()).sRGBHex);})();
```