可見性時，onfocus和onblur對輸入顏色元素不起作用：隱藏；被設置

Question

Onchange正在運作。 但是，當可見性隱藏時，使用輸入顏色元素觸發onfocus和onblur事件觸發的方法是什么？ 設置好了嗎？

我在互聯網上看到的例子。 我正在使用它。 但是當我在css中設置下一個時它不起作用。

#colorDialogID {
  visibility: hidden;
}

最后，如果在不進行任何更改的情況下打開和關閉顏色對話框，也許會有更好的解決方案來注冊？

     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

您必須有一些重復的ID。

我為您做了這個演示：

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

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;

工作演示

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