如何获取type="color"使用javascript输入

how to get value of type="color" input using javascript

本文关键字：quot color 使用 输入 javascript 何获取 获取 type      更新时间：2023-09-26

我在我的项目中使用了上面的html代码，但我不知道如何使用javascript获得上述输入的值

<form>
  <input type="color" id="favcolor">
</form>

有人能帮帮我吗?

谢谢

获取值

document.getElementById("favcolor").value;

如果您希望在选择更改时获得颜色，则可以添加事件侦听器。你可以这样做:

var theInput = document.getElementById("favcolor");
theInput.addEventListener("input", function(){
  var theColor = theInput.value;
  
  // Do something with `theColor` here.
}, false);
<input id="favcolor" type="color"/>

我们可以简单地为标签分配颜色值。

示例代码在这里

<label id ="colorVal">Select color</label>
<input type="color" id ='color'>Value</input>

JS代码
let colorInput = document.getElementById('color');

colorInput.addEventListener('input', () =>{
document.getElementById('colorVal').innerHTML = colorInput.value;
});

示例相互依存链接

https://codepen.io/ragi_jay/pen/poRMwMX

相关文章：