2011-09-19 18 views
0

私は、第2のテキストフィールドが第1のフィールドのデータと同じデータを持っているかどうかをチェックするスクリプトを作成しようとしていました。フィールドはスクリプトが彼が右に行くかどうかを彼に伝え続けます。彼が間違いを直ちにした場合、スクリプトはlabelを "emails not match"に設定することによって指摘します。ユーザがテキストフィールドに入力するのと同時にチェックする

Bu私は今まで成功していません。

スクリプト:これはHTMLファイルである場合には

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 !"; 
      } 
    } 
//} 
} 

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

以前私がループしながら、無限を使用しようとしていたが、それがブラウザをハングアップし、時にはブラウザをフェッチし続けますページ。

このスクリプトを改善して、ユーザーが正しいか間違っているかを即座に確認できるようにするにはどうすればよいですか?

答えて

2

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. 
関連する問題