HTML5 はフォームに多くの新しい機能を追加しました。Menglong Station では、それらをゆっくりと紹介していきます。今日は、HTML5 フォームに新しく追加されたフォーカス属性を紹介します。
HTML5ではautofocus属性が追加されており、これをサポートするブラウザでは、この属性が設定されていれば、JavaScriptを使用して動的にフォーカスを取得しなくても、フォーカスを対応するフィールドに自動的に移動できます。小さな例は次のとおりです:
HTMLコード
プレビュー効果
コードはオートフォーカスを備えたブラウザで通常どおり実行されますset, we このプロパティが設定されているかどうかは、JavaScript で検出する必要があります。設定されている場合、focus() メソッドを呼び出す必要はありません。
JavaScriptコード
function load(){ var oInp = document.getElementById("inp"); if(oInp.autofocus != true){ oInp.focus(); } } window.addEventListener('load',load, false);
HTMLコード
プレビュー効果
オートフォーカスはブール属性であるため、ブラウザでサポートされています、その値は「true」です。これをサポートしていないブラウザでは、その値は空の文字列です。上記のコードは、autofocus が true に等しくない場合にのみ focus() メソッドを呼び出します。これにより、前方互換性が確保されます。 autofocus 属性をサポートするブラウザには、Firefox 4 以降、Safari 5 以降、Chrome および Opera 9.6 が含まれます。
デフォルトでは、フォームのみがフォーカスを取得できます。他のラベル要素については、最初に tabIndex 属性を -1 に設定してから focus() メソッドを呼び出すと、これらの要素もフォーカスできますが、このテクノロジーをサポートしていないのは Opera だけです。
HTML5 は、すべての人のコーディング作業を非常にシンプルにし、小さな属性によって 1 行または数行の JavaScript コードを節約し、すべての人のコーディング作業をより簡単かつ快適にします。以上、HTML5の実践・分析フォーム入門 - focus属性(autofocus属性)の自動取得について、HTML5アプリケーションの皆様のお役に立てれば幸いです。
上記は HTML5 の実戦と解析フォーム - フォーカス属性 (autofocus 属性) を自動取得する内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。