javascript - How to get the new color value from Input Color after choosing it? - Stack Overflow

admin管理员组

文章数量:1406943

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.

• javascript
• html
• colors

Share Improve this question Follow edited Apr 1, 2016 at 10:37 New 67111 gold badge1212 silver badges2121 bronze badges asked Apr 1, 2016 at 10:07 user3450862user3450862 55011 gold badge99 silver badges2525 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You 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>

本文标签： javascriptHow to get the new color value from Input Color after choosing itStack Overflow