オートコンプリートを使用してフォームにデータが入力されたときにJavascriptが有効にならない

Question

以下のコードは2つのテキスト入力フィールドを表示し、人々がフォームを完了したときにボタンを有効にするJavascriptタイマーもあります。

ダイナミックボタンを作成し、フォームにオートコンプリートが設定されているときにボタンを有効または無効にするループを記述すると、Webページがどこでもクリックされるか、ユーザーがフォームに文字を入力するまで有効になりません。これは、フォームが完了してボタンが無効になっているので、人を混乱させます。

フォームは実際には完成していないようですが、Chrome/Firefoxはフィールドを完全なものとして表示しますが、ユーザーがページとやり取りするまで実際には表示されません。

オートコンプリートでフォームが自動的に完了したら、ボタンを有効にするにはどうすればよいですか？

<input type='text' id='username' autofocus /> 
<input type='password' id='password' /> 
<script type="text/javascript"> 
    if (document.getElementById('username').value != '' && document.getElementById('password').value != '') { 
     document.write('<input type="submit" value="Login" />'); 
    } else { 
     document.write('<input type="submit" disabled="disabled" value="Login" />'); 
    } 
</script> 

これは参照するために、これはフォームが完全であることを確認するために使用されるタイマーで実行されます。

window.onload = function() { 
    var check_interval = 250; 
    window.setInterval(function() { 
     if (document.getElementById('username').value != '' && document.getElementById('password').value != '') { 
      document.getElementById('button').removeAttribute('disabled'); 
     } else { 
      document.getElementById('button').setAttribute('disabled', 'disabled'); 
     } 
    }, check_interval); 
}; 

編集：オートコンプリートは、すべてのブラウザを越えてイベントを発生させないようのonChangeは、この問題の良い解決策ではありません。この回答の一部には、questionという情報があります。とにかくonChangeがうまく動作しない場合は、パスワードがzxcvbn libで十分に強力であると見なされる場合にのみボタンが有効になるパスワードをユーザーが設定します。ポーリングはうまく動作します。ユーザーが別のフィールドに移動した後は、onChangeが起動するように見えます。

Answer 1

フォームの値を確認するためにインターバルタイマを使用することは、間違いなく最良の方法ではありません。代わりに、同じことを行う2つのフォームフィールドのonChangeイベントのイベントハンドラでそのコードを使用することをお勧めします。ボタンは、両方のフィールドにテキストが瞬時にある場合に有効になります。