2

name field for user新しく作成されたすべてのオブジェクト（または）の最初の要素にカーソルを置く傾向がありますemail id field on the login page。name field for userユーザーがユーザーの他のフィールドを変更し、User.updateの実行中にオートフォーカスを実行すると、要素nameにカーソルを置く代わりに実際にフィールド全体がマークされるため、User.updateにオートフォーカスするのは理にかなっていますか？name。正しい行動はどうあるべきですか？

4

2 に答える 2

7

Web ページでのオート フォーカス動作の目的は、ユーザーがキーボードから離れて、そのページで最も一般的なタスクのためにマウス操作を行うのを防ぐことです。

したがって、「このページで実行される最も一般的なタスクは何ですか?」という質問をする必要があります。

次に、「この画面で最も一般的なタスクを実行するために、ユーザーが最初にアクセスまたは編集する必要がある UI 要素 (フィールド) は何ですか?」と尋ねます。

あなたの答えは、あなたのオートフォーカスがどこに行くかを決定するはずです。ただし、注意してください。ユーザーは、オート フォーカスがページの最初のフィールドに移動することを期待しています。したがって、これがユーザーにとって望ましいと確信している場合にのみ、他の場所に配置してください。その場合も、そのフィールドをページの上部に移動することを検討してください。

あなたの場合、「name」要素は完全にマーク（選択）されます。これは、すでにデータが含まれているフィールドに対してオートフォーカスが機能するためです。これは、ユーザーがカーソル キーと削除キーを使用してさらに作業を行うことなくフィールドの内容を置き換えることができるため、最も望ましい動作です。また、編集のみが必要な場合は、Home/End キーと矢印キーを使用するだけですばやく編集できます。必要な場所にカーソルを移動します。

=====編集/追記=====

これを元の回答に追加するのを忘れていましたが、ここで言及しなければならないほど私の大きな不満です。

オート フォーカスを実行する場合は、ユーザーが既に入力している場合にオート フォーカスが起動しないようにしてください。ログイン中にカーソルが自動的に移動することほど煩わしいことはありません。

Yahoo!でこんなことがありました。いつもメールのログイン画面。ページの読み込みが遅い場合、DOM の準備が整う数秒前にログイン フォームがレンダリングされ、準備ができたときにのみオート フォーカスが起動されます。そのため、手動でクリックしてログイン フィールドにフォーカスし、オート フォーカスが静かにカーソルをログイン フィールドに戻し、画面を見上げて自分の半分ログインフィールドにプレーンテキストのパスワードが表示され、ユーザー名と衝突しました。

修正はとても簡単です。そこに焦点を当てる前に、ログインフィールドがまだ空白であるかどうかを確認してください。そうしないと、ユーザーが既に何かを入力したことがわかり、オートフォーカスの利便性がフラストレーションに変わるため、そうしないでください。フィールドに が与えられていると仮定して、コード例を次に示しますid="username"。

function focusIfBlank(){
    username = document.getElementById('username'); 
    if(username.value == "") {
        username.focus();
    }
}

また、DOM の準備ができたときではなく、インラインで focusIfBlank() を呼び出すことを検討してください。これは、レンダリング後ほぼ瞬時にフォーカスされるため、ユーザーにとって役立つ可能性が高くなるためです。

于 2011-12-08T18:05:25.533 に答える
0

あなたの答えかどうかはわかりませんが、

<body>
    Name: <input type="text" autofocus /> <br />
    Email: <input type="text" />
</body>

その他のオプションについては、これとこれを参照してください。

于 2011-12-12T06:50:57.110 に答える