可见性时，onfocus和onblur对输入颜色元素不起作用：隐藏；被设置

Question

Onchange is working. Onchange正在运作。 But what is the way to make onfocus and onblur events to fire when working with input color element when visibility: hidden; 但是，当可见性隐藏时，使用输入颜色元素触发onfocus和onblur事件触发的方法是什么？ is set? 设置好了吗？

I was seeing the example on internet. 我在互联网上看到的例子。 And I am using it. 我正在使用它。 But it does not work when i have next set in css. 但是当我在css中设置下一个时它不起作用。

#colorDialogID {
  visibility: hidden;
}

On the end maybe there would be some better solution to register if color dialog was opened and closed without any change? 最后，如果在不进行任何更改的情况下打开和关闭颜色对话框，也许会有更好的解决方案来注册？

     function getColor2() {  
                 console.log("change");
    }
    document.getElementById("colorDialogID").onchange = getColor2;


    function myFocusFunction() {
        console.log("open"); 
    }

    function myBlurFunction() {
        console.log("close"); 
    }
    document.getElementById("colorDialogID").onfocus = myFocusFunction;
    document.getElementById("colorDialogID").onblur = myBlurFunction;

 var statusName;
 function createStatusF(){  


  document.getElementById("colorDialogID").focus();
  document.getElementById("colorDialogID").value = "#FFCC00"; 
  document.getElementById("colorDialogID").click();  
 }

document.getElementById("newStatuslabelID").onclick = createStatusF;

Answer 1

You must have some duplicated id. 您必须有一些重复的ID。

I did this demo for you: 我为您做了这个演示：

HTML HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select id="colorDialogID">
  <option value="#df0000">Red
  <option value="#7b93d3">Blue
  <option value="#000000">Black
</select>
  <hr>
  <span>Your selection</span>
  <p id="selectedColor"></p>
</body>
</html>

JAVASCRIPT JAVASCRIPT

function getColor2() {
var x = document.getElementById("colorDialogID").value;
  document.getElementById("selectedColor").innerHTML = "You selected: " + x;
      console.log("Selected color is:" + x); 
}
document.getElementById("colorDialogID").onchange = getColor2;


function myFocusFunction() {
    console.log("open"); 
}

function myBlurFunction() {
    console.log("close"); 
}
document.getElementById("colorDialogID").onfocus = myFocusFunction;
document.getElementById("colorDialogID").onblur = myBlurFunction;

Working Demo 工作演示

Answer 2

您可以调用类似此document.getElementById("colorDialogID").onfocus = function() {myFocusFunction()};函数document.getElementById("colorDialogID").onfocus = function() {myFocusFunction()};

可见性时，onfocus和onblur对输入颜色元素不起作用：隐藏；被设置

问题描述

2 个解决方案

解决方案1
1 2018-12-17 15:58:08

解决方案2
0 2018-12-17 16:12:06

可见性时，onfocus和onblur对输入颜色元素不起作用：隐藏； 被设置

问题描述

2 个解决方案

解决方案1 1 2018-12-17 15:58:08

解决方案2 0 2018-12-17 16:12:06

可见性时，onfocus和onblur对输入颜色元素不起作用：隐藏；被设置

解决方案1
1 2018-12-17 15:58:08

解决方案2
0 2018-12-17 16:12:06