Question

我经常搜索并在stackoverflow上找到答案，但一切都是徒劳无益的。我希望在input字段中更改颜色时获取颜色值。这是我的代码请检查这为什么它不起作用。

 <input type="color" id="bgcolor" value="#ffffff" onchange="test()" />

这是javascript代码。

 function test(){
    console.log('working.....'); 
 }

此功能无效，如果您将onChange替换为onclick它的工作正常，但为什么不能onChange。

感谢。

Answer 1

我在Windows上使用Chrome和Firefox时都会遇到相同的行为，它只会出现纯黑色，纯白色，以及任何一种非常接近任何一种颜色的颜色。

如果您查看颜色选择器，您会注意到当您在主方块中移动光标时rgb值不会改变（如果您使用右侧的垂直滑块，它们会这样做，但这不是平均值用户倾向于这样做）。

使用相同颜色选择器的其他应用程序也会出现相同的行为，例如MSpaint或Tkinter的tkColorChooser.askcolor()。我认为这是Window的默认颜色选择器，因为“color”具有英国英语拼写“color”，这是我的默认语言选择。

要解决此问题，只需使用不是#ffffff或#000000（或关闭）的任何颜色作为开始颜色。

<label for="doesntWork1">doesn't work</label> <input type="color" id="doesntWork1" value="#ffffff" onchange="alert(this.value);" />
<p>
<label for="doesntWork2">doesn't work</label> <input type="color" id="doesntWork2" value="#000000" onchange="alert(this.value);" />
<p>
<label for="works1">works</label> <input type="color" id="works1" value="#fdffff" onchange="alert(this.value);" />
<p>
<label for="works2">works</label> <input type="color" id="works2" value="#000002" onchange="alert(this.value);" />

Answer 2

像这样访问这个值。

function test(t) {
  console.log(t.value);
}

<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" onkeyup="test(this)" />

Answer 3

希望这会对你有所帮助。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="color" id="bgcolor" value="#ffffff" />
    </body>
    <script>
        $(document).on("change" , "#bgcolor" , function(){
            alert($(this).val());
        });
    </script>
</html>

$(document).on("change" , "#bgcolor" , function(){
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input type="color" id="bgcolor" value="#ffffff" />

Answer 4

它为我工作，请在下面查看

function hello()
{
 alert("hi");
}

<input type="color" value="#ff0000" onchange="hello();">

Answer 5

尝试使用JavaScript和JQuery跟踪代码段。

＆＃13;

//Javascript function
function test(t) {
  console.log(t.value);
}
//Jquery function
$('#bgcolor').change(function(){
  console.log($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" />

＆＃13;

Answer 6

我认为这个问题只发生在某些平台上。您应该指定正在运行的平台以避免混淆。这就是为什么大多数人无法重现你的问题。

您是否碰巧在Mac OS X上运行浏览器？在这种情况下，使用“输入”而不是“更改”，如下所示：

$('#bgcolor').on('input',
    function()
    {
        console.log($(this).val());
    }
);

实际上我认为“输入”是颜色输入的正确事件，而不是“改变”，所以无论如何你都可以对所有平台使用“输入”。

onChange事件在颜色类型输入中不起作用

6 个答案: