Question

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

我可以选择单元格，单击颜色按钮，选择颜色并按Enter（在Chrome上）。

我的问题，只有在我再次按下颜色按钮（并再次打开窗口......）后，颜色才会发生变化。

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

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

我需要使用JavaScript，没有jQuery 。

Answer 1

您可以使用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">

Answer 2

尝试此代码对我来说是工作..！

此代码是纯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>

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

2 个答案: