使用 javascript 进行实时验证 - onchange 仅触发一次答案

【问题标题】：live validation with javascript - onchange only triggered once使用 javascript 进行实时验证 - onchange 仅触发一次
【发布时间】：2011-11-12 13:49:56
【问题描述】：

所以我只是用js测试一些东西，基本上第一个输入中的数字必须大于第二个输入中的数字才能激活提交按钮。

按钮get的禁用恰到好处，但如果我更改数字它不会再次激活

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

编辑：数字输入的箭头似乎触发了onchange，导致了问题

【问题讨论】：

标签： javascript html validation onchange

【解决方案1】：

您必须添加 onclick 和 onkeyup 事件才能响应鼠标交互和从剪贴板插入：

http://jsfiddle.net/wzvvN/1

<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

【讨论】：

或许可以尝试使用onfocus 事件来代替？
@ComFreek: onkeyup() 是让它在该代码中工作的原因。
嗯，很抱歉，但可以使用鼠标粘贴来更改值.. 需要 onchange
@Hippo onclick 是必需的，因为您也可以用鼠标更改值！
嗯...看起来像 onkeyup、onclick 和 onchange 的组合效果更好。如果没有onchange()，当您使用鼠标粘贴并使用Tab 键切换焦点时，不会触发回调。

【解决方案2】：

尝试将 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>

【讨论】：

就我而言，onblur 是最好的解决方案，因为我想在输入字段失去焦点后检查内容（即用户停止编辑）。赞成:)

【解决方案3】：

您可能想要使用onkeyup()，因为onchange() 仅在您将焦点切换到另一个元素时才会被调用。

另外，您的函数当前正在比较字符串。使用 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>

【讨论】：

这不能很好地与 html5 数字输入一起使用，对于 onkeyup 我根本没有得到任何响应
是的，我注意到我在尝试时遇到了一个错误，因此它没有工作