HTML DOM Input - Color 对象

HTML 中的 <input> 元素是用来创建各种输入控件的标签，其中 type="color" 属性用于创建一个颜色选择器控件。用户可以通过单击颜色选择器来选择一个颜色值。这个颜色值可以是十六进制、RGB 或 HSL 格式的颜色。

属性

• value：指定输入框的初始值，可以是任何有效的颜色值。
• disabled：禁用输入框，用户无法进行编辑操作。
• required：指定输入框为必填项，如果为空则会提示用户填写。
• readonly：只读模式，用户无法编辑输入框内容。
• name：指定输入框的名称，用于表单提交时的标识。

事件

• change：当输入框的值发生改变时触发。

示例代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Color Input Example</title>
</head>
<body>
    <label for="color">Choose a color:</label>
    <input type="color" id="color" name="color" value="#ff0000">
    
    <script>
        document.getElementById('color').addEventListener('change', function(event) {
            console.log('Selected color:', event.target.value);
        });
    </script>
</body>
</html>

在上面的示例代码中，我们创建了一个颜色选择器输入框，并监听了其 change 事件。当用户选择了一个新的颜色时，控制台会输出所选颜色的值。这样，开发者就可以在用户选择颜色时进行相应的处理操作。