如何检测<输入类型=“颜色">是否为“输入类型".颜色选择器打开和关闭 [英] 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开发Web应用程序，但希望使用更通用的解决方案.是否会为选择器的打开和关闭触发任何事件?

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.

推荐答案

颜色选择器

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:

工作小提琴

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.

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