如何检测<input type="color>颜色选择器打开和关闭 [英] How to detect if an <input type="color"> color picker is opened and closed

问题描述

我有一个这样的颜色输入:

I have a color input like this:

<input type="color" />

我需要检测原生颜色选择器何时打开以及何时关闭.我正在为 Chrome 开发一个网络应用程序，但更喜欢更通用的解决方案.是否为打开和关闭选择器触发了任何事件?

I need to detect when the native color picker is open and when it is closed. I am developing a web app for Chrome, but would prefer a solution that is more general. Are any events fired for open and close of the picker?

看起来每当颜色选择器的颜色发生变化时都会触发 change 事件，但我看不到在打开时触发了事件.

It looks like change events are fired whenever the color picker's color is changed, but I can't see that an event is fired on open.

推荐答案

颜色选择器 docs 声明输入事件适用.因此，您可能可以使用选取器上的 focus 和 blur 事件执行某些操作，并监视专用变量的状态，如下所示:

The color picker docs state that the input events apply. So you could probably do something using the focus and blur events on the picker and monitor the state of a dedicated variable like the following:

工作 fiddle

html

<input id="clr" type="color" />

javascript

(function(){
    var picker = document.getElementById('clr'),
            tog = false;


  picker.addEventListener('focus', function(){
    if(tog === true){
        console.log('open');
    }else{
        console.log('closed');
    }
  });

  picker.addEventListener('blur', function(){
    tog = !tog;
    if(tog === true){
      tog = false;
        console.log('open');
    }else{
        console.log('closed');
    }
  });

}());

注意focus 事件会触发两次.

Note the focus event fires twice.

这篇关于如何检测<input type="color>颜色选择器打开和关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！