onfocus and onblur not working for input color element when visibility: hidden; is set
Question
Onchange is working. But what is the way to make onfocus and onblur events to fire when working with input color element when visibility: hidden; 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.
#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;
2 answers
solution1
1 2018-12-17 15:58:08
You must have some duplicated id.
I did this demo for you:
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;
solution2
0 2018-12-17 16:12:06
您可以调用类似此document.getElementById("colorDialogID").onfocus = function() {myFocusFunction()};函数document.getElementById("colorDialogID").onfocus = function() {myFocusFunction()};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.