パスワードの変更時にfacebookはこれをonkeyupとonchangeでどのようにしますか？

Question

Facebookにパスワードを変更したことに気がつきました。パスワードが一致しない、または確認パスワードが短すぎるということを示す下の警告が表示されます。

しかし、私がファイヤーバグを使用するとき、私はonkeyupまたはonchangeを見ません。

私が入力したか、文字列をコピーして貼り付けても、（私は疑わしいjavascriptの）バリデーションを引き起こすかどうかにかかわらず、とてもうまくやってくれました。

どうやってそれをするのですか？もっと重要なのは、彼らがやる方法をコピーしたいのです。

ここに私のhtmlで見たfirebugがあります。

<tr class="password confirm_password"> 
<td class="label"> 
Confirm Password: 
<br/> 
<small>(required)</small> 
</td> 
<td> 
<input id="confirm_password" class="inputpassword" type="password" value="" name="confirm_password"/> 
<div id="confirm_password_match_display" class="tips"> 
<span class="short_pass">Passwords do not match</span> 
</div> 
</td> 
</tr> 

奇妙なことがスパンclass = "short_pass"は、トリガされたときにのみ表示されます。どうやってやっているの？入力タグにはonkeyupまたはonchangeプロパティがないことに注意してください。

Answer 1

JavaScriptからonkeyupおよびonkeychangeなどのイベントを購読し、イベントリスナーを要素自体の属性として埋め込まないことをお勧めします。これにより、ロジックとコンテンツが適切に分離されます。 Facebookには、入力フィールドのonkeyup、onkeypress、およびonblurイベントにサブスクライブする外部（または内部）JavaScriptコードがある可能性が最も高いです。

この仕組みを知りたい場合は、QuirksMode.orgのIntroduction to EventsとAdvanced Event Registration Modelsをお読みになることをお勧めします。 IEのモデルと標準の違いから、JavaScriptライブラリを使用してこの作業を行う方がよいでしょう。

いくつかの例は、jQuery,YUI,、およびDojoです（そして、私は現時点では考えられないほどです）。私はあなたがフレームワークを選択し、それに精通することをお勧めします。 JavaScriptの開発がはるかに容易になります。

ここでは、非常に迅速に起動して実行するために使用できるjQueryの実用的なコード例を示します。完全な実例はhttp://jsbin.com/obamaです。それが「正しく」実行されるようにするには、ロジックを処理する検証フレームワークを使用する必要があります。ここにはexample of a working jQuery validation frameworkがあり、ここにはthe plugin it was written inがあります。

(function() { 
$(document).ready(function() { 

    $("#password").blur(function() { 

    }); 

    function validatePasswordsMatch() { 
     var $pwd = $("#password"); 
     var $confirm = $("#confirmPassword"); 
     if ($pwd.val().length > 0 && $confirm.val().length > 0 && $pwd.val() != $confirm.val()) { 
      $("#match").text("Passwords do not match."); 
      $confirm.keyup(validatePasswordsMatch); 
      $pwd.keyup(validatePasswordsMatch); 
      console.log('alert bad'); 
     } else { 
      $("#match").text(""); 
      console.log('alert'); 
      $confirm.unbind('keyup', validatePasswordsMatch); 
      $pwd.unbind('keyup', validatePasswordsMatch); 
     } 
    } 

    function validatePasswordLength() { 
     var $pwd = $("#password"); 
     if ($pwd.val().length < 6) { 
      $("#lengthMsg").text("Password does not meet length requirement."); 
      // Bind to keypress so the validator re-validates as the user types when the text box gains focus. 
      $pwd.keypress(validatePasswordLength); 
     } else { 
      $("#lengthMsg").text(""); 
      $pwd.unbind('keypress', validatePasswordLength); 
     } 
    } 

    $("#password").blur(validatePasswordLength).blur(validatePasswordsMatch); 
    $("#confirmPassword").blur(validatePasswordsMatch); 

}); 
})();