2011-01-18 17 views
0

3つのWebフォームを持つWebページがあります。最初の2つはデジタル入力を想定し、最後は空ではありません。ここでjQuery:ユーザーが他の場所をクリックしたときにWebフォームをクリアする

A web form showing three text fields, two of them containing invalid inputs

減少し、すぐに実行するテストケースは次のとおりです。

<html> 
<head> 
<style> 
.invalid { 
     border: 2px solid #FF0000; 
     background-color: #FFCCCC; 
} 
</style> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     //$('body').click(....) 
     $('#cl_txt, #mks_txt, #comment_txt').blur(function() { 
      $('#cl_txt, #mks_txt, #comment_txt').removeClass('invalid'); 
     }); 

     $('#mks_btn').click(function(e) { 
      if (! $('#mks_txt').val().match(/^[0-9]{6,}$/i)) { 
       $('#mks_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
     $('#cl_btn').click(function(e) { 
      if (! $('#cl_txt').val().match(/^[0-9]{6,}$/i)) { 
       $('#cl_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
     $('#comment_btn').click(function(e) { 
      if ($('#comment_txt').val().length < 2) { 
       $('#comment_txt').addClass('invalid'); 
       e.preventDefault(); 
      } 
     }); 
}); 
</script> 
</head> 
<body> 
<table border=1> 
<form><tr><th>MKS</th><td> 
<input name="toggle_mks" id="mks_txt" type="text" size="10"> 
<input type="submit" id="mks_btn" value="Add MKS" class="toggle"> 
</td></tr> 
<form><tr><th>CL</th><td> 
<input name="toggle_cl" id="cl_txt" type="text" size="10"> 
<input type="submit" id="cl_btn" value="Add CL" class="toggle"> 
</td></tr></form> 
<form><tr><th>Comments</th><td> 
<textarea name="comment" id="comment_txt" rows="4" cols="40"> 
</textarea> 
<input type="submit" id="comment_btn" value="Add comment" class="toggle"> 
</td></tr></form> 
</table> 
</body> 
</html> 
無効な文字が入力された

と送信ボタンをクリックした対応、その後、私は.invalidを追加クラスをそのテキストフィールドまたはテキストエリアにドラッグして赤色にします。

私の問題は、ユーザーが気を変えてそのWebフォームを再提出しないという状況を処理することにあります。代わりに、別のWebフォームにクリックするか、Webページのどこかをクリックするだけです。私は赤.invalidクラスを希望その場合

#cl_txt #mks_txtと#comment_txt再びテキストエレメントから除去されます。しかし、私はそれを整理する方法を知らない。私は$( '#cl_txt、#mks_txt、#comment_txt')を設定しようとしましたが、ぼかし(....)は一貫して動作しません。私は$( 'body')を試しましたが、代わりにをクリックしてください。フォームの検証が壊れているように見えますが、テキストフィールドは決して赤く塗られません。

お願いします。

答えて

1

jQuery outside eventsプラグインを試してみてください。また、demoを参照してください。 主な考え方は、要素clickoutside(またはさらにdblclickoutside)イベントに委任し、発生時に何が起こるべきかを指定することです。

希望は役立ちます。

+0

興味深い情報をありがとう、しかし私はまだ別のプラグインを紹介したくないと思った。たぶん私はここで何とかタイムアウトを使用することができます - それらのどれも焦点が当てられていない場合、しばらくしてからフィールドを消さないようにするには? –

+0

もちろん、できますが、ここでは「不自然」になると思います。 – Darmen

関連する問題