JavaScriptでテキストの入力非入力を検出する

今回はJavaScriptでフォームの入力を検出してボタンを有効/無効にするTipsです。

まずはJavaScriptのコードです。

view plainprint?

1. <script type="text/javascript">  
2. <!--  
3. // 入力欄にフォーカスが当たったときの処理  
4. function onFocusInputText() {  
5.  // 入力がある場合のみ登録ボタンを有効にする  
6.  setTimeout("input_textCheck()", 200);  
7.  return false;  
8. }  
9.   
10. // 入力有無を検出する  
11. function input_textCheck() {  
12.  var form = document.form_input_text;  
13.  if (form.input_text.value.length > 0) {  
14.   form.entry.disabled = false;  
15.  }  
16.  else {  
17.   form.entry.disabled = true;  
18.  }  
19.  setTimeout("input_textCheck()", 200);  
20. }  
21.   
22. //-->  
23. </script>  

200m秒のタイマーイベントに、ボタン有効/無効の関数input_textCheck()を登録するだけです。

無限にチェックするためにinput_textCheck()の中でタイマーイベントに自分を設定しています。

次にHTMLのコードです。

view plainprint?

1. <form name="form_input_text"><input type="textbox" name="input_text" onfocus="return onFocusInputText();">  
2.  <input type="button" name="entry" value="登録" disabled="">  
3. </form>  

textboxのonfocusイベントハンドラにonFocusInputText()を設定しています。

↓のフォームに文字を入力すると登録ボタンが有効になり、文字が無いと無効になります。