0

入力ボックスにフォーカスを設定するように設計されているほとんどすべての Web ページは、body onload イベントにコードを追加します。これにより、html ドキュメント全体がロードされると、コードが実行されます。理論的には、これは良い習慣のようです。

ただし、私の経験では、これにより通常、ユーザーは 2 つまたは 3 つのフィールドにデータを入力しており、知らないうちにカーソルが戻ったときに別のフィールドに入力しているため、二重の作業が発生します。驚くほど多くのユーザーがパスワードの最後の 2/3 をユーザー名フィールドの先頭に入力しているのを見てきました。そのため、遅延がないように、常に入力の直後に JS フォーカス コードを配置しています。

私の質問は: このフォーカス コードをインラインに配置しない技術的な理由はありますか? ページの最後または onload イベント内で呼び出す利点はありますか? 明らかな実用上の欠点を考慮して、なぜそれが一般的な慣行になったのか興味があります。

4

5 に答える 5

1

いくつかの考え：

  1. jQueryのようなフレームワークを使用して、このタイプのコードをで実行し$(document).ready(...ます。window.onloadは、ページ上のすべてが完全にロードされるまで実行されません。これは、発生した遅延を説明しています。$(document).ready(...jQueryがDOMがロードされたと判断したときに実行されます。jQueryがなくても同じ種類のロジックを記述できる可能性がありますが、ブラウザーによって異なります。

  2. 私は、JavascriptをHTMLから分離しておくことを好みます。これにより、関心の分離がより明確になります。次に、CSSでのプレゼンテーションとは別のドキュメント構造とは別の動作が維持されます。これにより、ロジックをより簡単に再利用し、そのコードを（おそらくプロジェクト間で）維持することもできます。

于 2013-03-14T21:01:59.017 に答える
0

また、ページ上の入力にフォーカスが含まれているかどうかを確認したりif($("input::focus, textarea::focus").length)...、目的の入力にフォーカスを設定したりすることもできます。

于 2013-03-14T21:02:01.587 に答える
0

ページ全体が読み込まれる前に呼び出すと、呼び出し時に要素がすでに読み込まれているかどうかがわかりません。また、事前に電話をかける場合は、要素が実際に存在するかどうかを確認する必要があります。

次に、インラインで電話をかけます。これは理想的に思えるかもしれません。しかし一方で、ページの読み込みに時間がかかり、読み込み段階で複数の入力を行うことができる場合は、非常に悪いことです。

また、入力が行われたかどうかなどを確認することもできます。

于 2013-03-14T20:56:01.877 に答える
0

HTML 属性を使用して、autofocus最初にフォーカスを受け取る要素を指定します。これにより、JavaScript が分離され、古いブラウザーでは正常に機能が低下します。

于 2013-03-14T21:18:19.450 に答える
0

Google と Yahoo はどちらも、パフォーマンス上の理由から、html ページの下部にスクリプトを配置することを提案しています。

Yahoo の記事: http://developer.yahoo.com/performance/rules.html#js_bottom

正しいユーザーエクスペリエンスを意味する場合は、スクリプトを適切な場所に配置する必要があります。実際、入力の前にスクリプトのその部分 (タブ入力に使用) をロードして、接続がどれほど遅くても常に機能するようにします。

「document.ready」関数を使用すると、参照したい要素が dom 内にあり、ドキュメント dom 全体が読み込まれたときにすぐに起動することができます (これは、画像が完全に読み込まれるという意味ではありません)。

必要に応じて、入力を無効にしてから、ドキュメントの準備ができたら再度有効にすることができます。これにより、入力が表示されたときにスクリプトがまだ準備できていないまれなケースが処理されます。

于 2013-03-14T20:52:33.507 に答える