HTML5実践・分析フォーム - focus属性を自動取得（autofocus属性）

HTML5 はフォームに多くの新しい機能を追加しました。Menglong Station では、それらをゆっくりと紹介していきます。今日は、HTML5 フォームに新しく追加されたフォーカス属性を紹介します。

HTML5ではautofocus属性が追加されており、これをサポートするブラウザでは、この属性が設定されていれば、JavaScriptを使用して動的にフォーカスを取得しなくても、フォーカスを対応するフィールドに自動的に移動できます。小さな例は次のとおりです:

HTMLコード

<input type="text" value="梦龙小站" autofocus />

プレビュー効果

コードはオートフォーカスを備えたブラウザで通常どおり実行されますset, we このプロパティが設定されているかどうかは、JavaScript で検出する必要があります。設定されている場合、focus() メソッドを呼び出す必要はありません。

JavaScriptコード

function load(){
	var oInp = document.getElementById("inp");
	if(oInp.autofocus != true){
		oInp.focus();
	}
}
window.addEventListener('load',load, false);

HTMLコード

<input type="text" value="梦龙小站" autofocus />

プレビュー効果

オートフォーカスはブール属性であるため、ブラウザでサポートされています、その値は「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 サイト (www.php.cn) に注目してください。