使用 javascript 进行实时验证 - onchange 仅触发一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8104834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
live validation with javascript - onchange only triggered once
提问by deemel
So I'm just testing something with js, basically the number in the first input has to be bigger than the number in the second input for the submit button to be activated.
所以我只是用js测试一些东西，基本上第一个输入中的数字必须大于第二个输入中的数字才能激活提交按钮。
The button get's disabled just right, but if I change the number it won't activate again
按钮被禁用恰到好处，但如果我更改号码，它将不会再次激活
<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub"/>
</body>
</html>
Edit: The arrows of the number input trigger onchange it seems, that caused the problem
编辑：数字输入的箭头似乎触发了onchange，导致了问题
采纳答案by ComFreek
You have to add the onclickand onkeyupevent in order to respond to mouse interactions and to inserts from the clipboard:
您必须添加onclick和onkeyup事件以响应鼠标交互和从剪贴板插入：
<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
回答by Martin Borthiry
Try binding the onfocus and onblur events to.
尝试将 onfocus 和 onblur 事件绑定到。
<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
回答by AbdullahC
You may want to use onkeyup(), since onchange()gets called only when you switch focus to another element.
您可能想要使用onkeyup()，因为onchange()只有在您将焦点切换到另一个元素时才会调用。
Also, your function is currently comparing strings. Use parseInt to convert to an integer and then compare. The following code works for me:
此外，您的函数目前正在比较字符串。使用 parseInt 转换为整数，然后进行比较。以下代码对我有用：
<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = parseInt(document.getElementById('first').value, 10);
var second = parseInt(document.getElementById('second').value, 10);
if(first > second){
document.getElementById('sub').disabled=false;
} else {
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>
