2011-11-12 93 views
4

所以我只是用js测试某些东西,基本上第一个输入中的数字必须大于第二个输入中要提交的按钮的数量。使用javascript进行实时验证 - onchange只触发一次

按钮获取的残疾人恰到好处,但如果我更改号码就不会启动再

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

编辑: 数输入触发的箭头平变化似乎引起问题

回答

4

你必须以响应鼠标交互,并从剪贴板插入添加onclickonkeyup事件:

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()" /> 
+1

如果用户移动使用TAB键不起作用 –

+0

也许尝试与'onfocus'事件呢? –

+0

@Martin http://jsfiddle.net/wzvvN/1/ – ComFreek

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> 
+0

不与HTML5的号码输入很好地工作,为的onkeyup我没有得到根本 – Rickyfox

+0

@Rickfox任何回应:我只是想出来,它为我工作。 – AbdullahC

+0

你注意到我在那里有一个错误,当我尝试它,它不工作,因为那 – Rickyfox

3

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

不起作用:http://jsfiddle.net/cRTgw/ – ComFreek

+0

在我的情况下,'onblur'是最好的解决方案,因为我想在输入字段LOST焦点(即用户停止编辑)后检查内容。 UPVOTED :) –