I use Input Color to change the color of the text in a table cell.
I can select the cell, click on the color button, select the color and press enter (on Chrome).
My problem is that the color changes only after I press again on the color button (and the window open again..).
How to change/get the value of the element after selecting the new color without clicking on it again ?
Is this related to the EventListener I use for the Input Color ?
I need to use JavaScript for this, no jQuery.
I use Input Color to change the color of the text in a table cell.
I can select the cell, click on the color button, select the color and press enter (on Chrome).
My problem is that the color changes only after I press again on the color button (and the window open again..).
How to change/get the value of the element after selecting the new color without clicking on it again ?
Is this related to the EventListener I use for the Input Color ?
I need to use JavaScript for this, no jQuery.
Share Improve this question edited Apr 1, 2016 at 10:37 New 6711 gold badge12 silver badges21 bronze badges asked Apr 1, 2016 at 10:07 user3450862user3450862 5501 gold badge9 silver badges25 bronze badges 4-
How about
change
listener ? Edit:<input type="color" name="favcolor" value="#ff0000" onchange='alert()'>
– Rayon Commented Apr 1, 2016 at 10:07 - @RayonDabre I added 'this.inputC.onchange='alert()';' and tried to see if it detects the value changes with 'function alert() { alert("Changed");}'. No detection at all. The value changes only after I close the color chooser and I click again the button. – user3450862 Commented Apr 1, 2016 at 10:25
- better with some code JS fiddle – Joy Biswas Commented Apr 1, 2016 at 10:25
- Can you share executable demo/snippet or JSFiddle ? – Rayon Commented Apr 1, 2016 at 10:25
2 Answers
Reset to default 3You can get input value with onchange event.
jQuery('#color').on('change',function(){
jQuery('#choosen-color').text(jQuery(this).val());
});
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="color" id="color">
<div id="choosen-color"></div>
UPDATE
document.getElementById('color').onchange=function(){
// do whatever you want with value
alert(this.value);
}
<input type="color" id="color">
Try This code it is work foe me..!
This code is pure JavaScript not use jquery..!
Use This Code And Enjoy...
var color1= document.getElementById("color1");
var rescolor1= document.getElementById("res_color1");
color1.addEventListener("input", function() {
res_color1.innerHTML = color1.value;
}, false);
var color2= document.getElementById("color2");
var res_text_color = document.getElementById("res_color2");
color2.addEventListener("input", function() {
res_color2.innerHTML = color2.value;
}, false);
// mmm.... is it an Opera bug? the manual input doesn't fire the input event type. (works just like change)
color 1: <input type="color" name="color1" id ="color1" required=""> <span id="res_color1"></span><br><br>
color 2: <input type="color" name="color2" id ="color2" required=""> <span id="res_color2"></span><br><br>