如何在选择“输入颜色”后从中获取新的颜色值

How to get the new color value from Input Color after choosing it?

本文关键字：获取 颜色值 输入颜色 选择 颜色 输入      更新时间：2023-10-20

我使用"输入颜色"更改表格单元格中文本的颜色。

我可以选择单元格，点击颜色按钮，选择颜色，然后按回车键（在Chrome上）。

我的问题是只有在我再次按下颜色按钮（窗口再次打开..）后颜色才会改变。

如何在选择新颜色后更改/获取元素的值而不再次单击？

这是否与我用于输入颜色的EventListener有关？

我需要使用JavaScript，没有jQuery。

您可以通过onchange事件获取输入值。

jQuery('#color').on('change',function(){
	jQuery('#choosen-color').text(jQuery(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="color" id="color">
<div id="choosen-color"></div>

更新

document.getElementById('color').onchange=function(){
	// do whatever you want with value
  alert(this.value);
}
<input type="color" id="color">

试试这段代码，它对我来说很有用。。！

此代码是纯JavaScript，不使用jquery

使用此代码并享受。。。

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>

相关文章：