onchange 属性在 javascript 中不起作用

Question

如果用户在id="sc1dc1"的 html 输入字段中输入某些内容（不直接在 HTML 中使用"onchange=" test()我想启动函数test() )。 怎么了？

HTML：

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <input type="text" id="sc1dc1" > 
</body>
</html>

Javascript：

var x = document.getElementById("sc1dc1").value;
x.onchange = test;
function test(){alert("Test")};

Answer 1

关于onchange事件的事情是它们只在<input>字段失去焦点时触发。 如果您想要立即响应，您应该像这样使用oninput ：

x.oninput = test;

您还需要使x等于实际元素，而不是元素的值。 删除：

.value

从这一行：

var x = document.getElementById("sc1dc1").value;

会修好。

使用onchange演示：

 var x = document.getElementById("sc1dc1"); x.onchange = test; function test() { alert("Test") };

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" id="sc1dc1"> </body> </html>

使用oninput演示：

 var x = document.getElementById("sc1dc1"); x.oninput = test; function test() { alert("Test") };

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" id="sc1dc1"> </body> </html>

Answer 2

javascript应该是这样的：

 var x = document.getElementById("sc1dc1"); x.onchange = test; function test(){alert("Test")};

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" id="sc1dc1" > </body> </html>

你不需要 .value

Answer 3

您需要将功能test分配给元素的oninput属性。 x应该是HTMLInputElement ，而不是元素的值。

改变

var x = document.getElementById("sc1dc1").value;

到

var x = document.getElementById("sc1dc1");

如果您想在输入文本oninput不是在输入失去焦点后立即触发事件处理程序，请使用oninput而不是onchange 。

 var x = document.getElementById("sc1dc1"); x.oninput = test; function test(){alert("Test")};

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" id="sc1dc1" > </body> </html>