jquery onChange事件在颜色类型输入中无效

1wnzp6jl 于 2023-08-04 发布在 jQuery

关注(0)|答案(8)|浏览(106)

我搜索了很多，在Stack Overflow上找到了答案，但都是徒劳的，没有什么对我有用。我想在input字段中更改颜色时获取颜色值。
这是我的代码，请检查一下为什么它不工作。

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

字符串
下面是JavaScript代码：

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

型
这个函数不起作用，如果你用onclick替换onChange，它工作得很好，但为什么不适用于onChange？

jquery

来源：https://stackoverflow.com/questions/39264722/onchange-event-is-not-working-in-color-type-input

8条答案

按热度按时间

cunj1qz11#

我在Windows上的Chrome和Firefox上都得到了同样的行为，它只发生在纯黑色，纯白色，或者任何非常接近它们中任何一个的颜色上。
如果你看一下颜色选择器，你会注意到当你在主方块中移动光标时，rgb值不会改变（如果你使用向右的垂直滑块，它们会改变，但这不是普通用户倾向于做的）。

的数据
使用相同颜色选择器的其他应用程序也会发生相同的行为，例如MSpaint或Tkinter的tkColorChooser.askcolor()。我假设这是Windows的默认颜色选择器，因为“颜色”有英国英语拼写“颜色”，这是我的默认语言选择。
要解决这个问题，只需使用任何不是#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);" />

字符串

赞(0）回复(0）举报 2023-08-04

qyswt5oh2#

有些人在不同浏览器中的行为不一致的问题发生了，因为你使用了onchange事件（jQuery中的change），这是不颜色输入的适当事件（这就是为什么它有时工作，有时不工作，特别是在Mac OS X上）。
你应该使用oninput（或者使用jQuery时使用input），它在所有浏览器和平台上都能正常工作。

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

字符串

赞(0）回复(0）举报 2023-08-04

zte4gxcn3#

希望这对你有帮助。

<!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" />

的数据

赞(0）回复(0）举报 2023-08-04

nuypyhwy4#

像这样访问值。

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

个字符

赞(0）回复(0）举报 2023-08-04

kgsdhlau5#

尝试使用JavaScript和jQuery来执行以下代码段。

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

个字符

赞(0）回复(0）举报 2023-08-04

vmpqdwk36#

它为我工作，检查它下面

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

个字符

赞(0）回复(0）举报 2023-08-04

wmvff8tz7#

"Instead of onchange on input type color use the input event in JavaScript.
Here is the working code."

<input type="color" id="colorPicker" value="#333" style="width:100%;height:210px;      border:none;background:none">

<script>
       colorpicker = document.getElementById('colorPicker');
       colorpicker.addEventListener('input', ()=>{
            console.log('my color is: ',colorpicker.value);
       });
        
</script>

字符串

赞(0）回复(0）举报 2023-08-04

bnl4lu3b8#

在我的angular（13）项目中，我使用了(input)=""：

<input
    (input)="someFunction()"
    type="color" />

字符串
这会在从渐变中拾取颜色的同时实时连续触发函数someFunction()。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery onChange事件在颜色类型输入中无效

8条答案

相关问题

热门标签

最新问答