Color input box <input type='color'> does not work with input event
Question
When using the 'input' event with addEventListener() it does not work properly with a color input box.
The HTML is:
<input type="color" value="#ff0000" id="colorWell">
<p>Text to be colored</p>
The Javascript is:
var colorWell = document.getElementById('colorWell');
colorWell.addEventListener("input", updateFirst, false);
function updateFirst(event) {
var p = document.querySelector("p");
if (p) {
p.style.color = event.target.value;
}
}
What should happen is that when a color in the color box is clicked, the 'input' event listener should fire, causing the text in <p> tag to color. This should all happen before the color box OK button is clicked.
This does not happen - the coloring only occurs after the OK button is clicked.
I'm using Chrome. Is this a Chrome problem? If so, is there a work around?
3 answers
solution1
0 2018-12-15 03:37:10
var colorWell = document.getElementById('colorWell'); colorWell.addEventListener("input", updateFirst, false); function updateFirst(event) { var p = document.querySelector("p"); if (p) { p.style.color = event.target.value; } }
<input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p>
solution2
0 2018-12-15 03:37:23
Add ...addEventListener("click",... above (or below) your "input" one.
Full sample below:
var colorWell = document.getElementById('colorWell'); colorWell.addEventListener("click", updateFirst, false); colorWell.addEventListener("input", updateFirst, false); function updateFirst(event) { var p = document.querySelector("p"); if (p) { p.style.color = event.target.value; } }
<input type="color" value="#ff0000" id="colorWell"> <p>Text to be colored</p>
solution3
0 2018-12-15 04:37:44
Please see below -
<html>
<body onLoad="startup()">
<script language="javascript" >
function startup()
{
colorWell = document.querySelector("#colorWell");
colorWell.addEventListener("input", updateFirst,false);
colorWell.select();
}
function updateFirst(event)
{
var colorWell = document.getElementById('colorWell');
var p = document.querySelector("p");
if (p)
{
p.style.color = event.target.value;
}
}
</script>
<input type="color" value="#ff0000" id="colorWell" onSelect='alert("X")'>
<p>Text to be colored</p>
<input class="Randombutton" style="float: left;" type="button" value="Randomize"
onclick="randomImg()">
<div id="quote">
</div>
</form>
</body>
</html>
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.