在用户输入文本字段的同时进行检查

checking at the same time the user is entering in the text field

本文关键字：进行检查 字段 用户 输入 文本      更新时间：2023-09-26

我试图写一个脚本，检查第二个文本字段，如果它有相同的数据，在第一个字段。当用户输入第二个文本字段时，脚本会不断告诉他是否正确。如果他犯了一个错误，脚本通过设置label等于"email do not match"来指出。

但我到现在还没有成功。

脚本:

window.onload = startChecker;
function startChecker() {
//while(true) {
    if( document.getElementById("first_field").value != "" ) {
        var idFromFirstField = document.getElementById("first_field").value;
          if(idFromFirstField != document.getElementById("second_field").value ) {
              document.getElementById("alert_message").value = "Incorrect Email ! ";
          } else {
              document.getElementById("alert_message").innerHTML = "Two emails match !";
            }
    }
//}
}

如果是HTML文件:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="cross_checker.js">
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
<label>Email<input type="text" id="first_field" /></label> <br /> <br />
<label>Verify your Email<input type="text" id="second_field" /></label> &nbsp;&nbsp;
<label id="alert_message" value="" style="color:#CC0000"></label> 
<!--the above label outputs if the user is entering the same id !--->
<br /> <br />
<input type="submit" value="submit" style="color:#CC0000"/>
</form>
</body>
</html>

早些时候，我试图使用无限while循环，但这挂起了浏览器，有时浏览器继续获取页面。

如何改进这个脚本，以便我能够立即检查用户是否正确或错误?

为input元素添加一个keyup处理程序。在HTML代码中，添加onkeyup="startChecker();" .

使用JavaScript，你可以动态地分配事件处理程序，如下所示:

if(window.addEventListener) element.addEventListener("keyup", startChecker, true); //All major browsers
else if(window.attachEvent) element.attachEvent("onkeyup", startChecker);
else element.onkeyup = startChecker;
//Where element refers to the HTML element.

相关文章：