JavaScriptは:どのように負荷のページにフォーカスを設定する

2009年4月1日

あなたのホームページでこの素晴らしい小さなログインフォームを持って... login-form

...と、あなたは彼らのサイトになるように人々が直接すぐにログインします。

これを容易にするため、小さなJavaScriptコードを自動的にユーザー名]テキストボックスにフォーカスを設定するように設定して:

 関数onPageLoad() 
  
  document.form.username.focus(); 
  

また注意点がここにもです。

通常プログラマは、HTMLでそのような方法を、コードが実行されるだけで後にページのすべての要素が読み込まれるのJavaScriptコードを配置します。

今ユーザーがサイトになると、ログインフォームを読み込みますが、ページ内のいくつかの他の要素はまだ読み込んでいます。

ユーザーがユーザー名を入力し始めると、パスワードを入力するに移動します:

login-form-username

お客様のページは現在、ロードが完了するJavaScriptが実行され、フォーカスをテキストボックスをusernameに設定します。 ユーザーが、彼はまだパスワードを入力して、これを知っているではありません。

login-form-pasword

おっと!

同じユーザビリティグリッチは、多くの似たような状況のユーザーアクションを含むで発生することができます。

この特定の状況では、あなたのようなものにコードを変更することができます:

 関数onPageLoad() 
  
  (もしdocument.form.username.value.length == 0) 
  
  document.form.username.focus(); 
  
  

また、早くフォームが表示完了スクリプトを実行するが、限り私がない信頼性の高い方法は、これらを行うには別のブラウザとは異なるものを実装するために知っている試みることができます。 同じブラウザは物事でも一貫性のないさまざまなシナリオで動作します。

10反応はこれまで

  • ニース。 もう1つのメソッドは、これを行うには...

    のdocument.getElementById("ユーザ名")。フォーカス();

    醜いが、有効です。

  • 実際には、そのスクリプトの前にINPUTタグされた。 また、スクリプトタジは、jsのコードを囲む - しかし、WPは、それを食べた。

  • ニヤズPKは 言う:

    それは私が話していた。 これは良い解決策、それは確実に働いていた場合されていると思います。 残念ながら、それは必ずしも。

    別のブラウザではドキュメントの負荷のさまざまな段階に埋め込まれたJavaScriptコードを実行します。

  • [...]抜粋:JavaScriptを:どのようにページの読み込み| Diovo [...]にフォーカスを設定する

  • ジョイスは 言葉:

    または使用jqueryの

    $(文書)を準備(関数()(
    $('#ユーザ名')フォーカス();
    ));

    DOMが完全に読み込まれた後に準備ができて関数がトリガされます。

  • ニヤズPKは 言う:

    ジョイス、

    うん。 jQueryはきれいにそうすることのonLoadのブラウザimplemetations心配する必要はありません、それを行っている。

    ここでも、さらには、jQueryを使用している場合は、より焦点を()のコードの作業する場合、()条件を使用する必要があります。 それは、この資料のポイントだった。

  • シルキーは 言う:

    ニースのアイデア。 これは、いつも私を気にしています。

  • Panthayiは 言う:

    情報dude.IのおかげでもGoogleの理解できないがそれについて知っていると思います。

  • ニヤズPKは 言う:

    絹のような、Panthayi、

    私は嬉しいが助けた。

  • ロンの 言葉:

    私たちは、Facebookのページを開くとどのように"電子メール"フィールドのテキストが強調表示されます注意してください。 彼の電子メールアドレスのユーザーの種類は、そのテキストを上書きとして。 そのが行われる可能性がどのように上の任意のアイデアですか?

返信コメントを残す