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

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

javascript html validation

使用javascript进行实时验证-onchange仅触发一次,javascript,html,validation,onchange,Javascript,Html,Validation,Onchange,所以我只是在用js测试一些东西，基本上第一个输入中的数字必须大于第二个输入中的数字，提交按钮才能被激活 “获取”按钮被正确禁用，但如果我更改号码，它将不会再次激活 <!DOCTYPE HTML> <html> <body> <input type='number' id='first' onchange="validateNumber()"/><br> <input type='number' id='second' onchan

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

“获取”按钮被正确禁用，但如果我更改号码，它将不会再次激活

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






函数validateEnumber（）
{
var first=document.getElementById（'first'）。值；
var second=document.getElementById（'second'）。值；
如果（第一次>第二次）{
document.getElementById（'sub'）。disabled=false；
}否则{
document.getElementById（'sub'）.disabled=true；
}
}

编辑：

数字输入的箭头触发onchange似乎是导致问题的原因

您可能需要使用

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>






函数validateEnumber（）
{
var first=parseInt（document.getElementById（'first'）。值，10）；
var second=parseInt（document.getElementById（'second'）。值，10）；
如果（第一次>第二次）{
document.getElementById（'sub'）。disabled=false；
}否则{
document.getElementById（'sub'）.disabled=true；
}
}

您必须添加

onclick

和

onkeyup

事件，以便响应鼠标交互和从剪贴板插入：

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

这对html5数字输入不起作用，对于onkeyup，我根本没有得到任何响应。你注意到我在尝试时出现了一个错误，但它不起作用，因为这样可能会尝试使用

onfocus

事件来代替它？@comfrek:

onkeyup（）

就是让它在代码中起作用的原因。嗯，很抱歉，但是可以使用鼠标粘贴更改该值。。一旦改变就是needed@Hippo

onclick

是必需的，因为您也可以用鼠标更改值！嗯……看起来像是

onkeyup

、

onclick

和

onchange

的组合，效果更好。如果没有

onchange（）

，使用鼠标粘贴并使用

选项卡切换焦点时不会触发回调。在我的情况下，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>