コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5のautofocus属性の使い方を詳しく解説

HTML5のautofocus属性の使い方を詳しく解説

黄舟
リリース： 2017-03-14 15:40:12
オリジナル
2323 人が閲覧しました

この記事では主に HTML5 の autofocus 属性 の使い方を詳しく紹介します。興味のある方は参考にしてください

HTML5 は私たちに多くの魔法をもたらしました。フォーム検証、INPUT プレースホルダー、ダウンロードされたファイルのクライアント側の名前変更、

オーディオ/ビデオなど、以前はJavaScriptとFlashが必要だったタスクはすべて、基本的なHTMLを使用して実行できます。ここで説明する簡単な HTML5 機能は、ページが読み込まれるときに入力フォーカスが要素に自動的に置かれるようにすることです。このアクションは autofocus 属性を使用して実行されます。

HTML コードは非常に単純です: 

XML/HTML Code复制内容到剪贴板
<!-- These all work! -->  
<input autofocus="autofocus" />  
<button autofocus="autofocus">Hi!</button>  
<textarea autofocus="autofocus"></textarea>
ログイン後にコピー


autofocus 属性を使用すると、ページの読み込み時にこれらの INPUT、TEXTAREA、または BUTTON 要素を選択できます。ただし、H1 タグなどの純粋な表示要素を使用する場合、autofocus 属性は使いにくいです。

このプロパティは、状況によっては非常に役立ちます。たとえば、Google のホームページは、ユーザーが 99% の時間の

検索 に使用する場所であるため、ページが読み込まれたら、カーソルを入力ボックスに置く必要があります。以前はJavaScriptを使って完成させる必要がありましたが、今ではその必要は全くなく、HTMLだけで完成することができます。

以上がHTML5のautofocus属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5
ソース：php.cn
前の記事：あなたが知らなかった HTML5 の 5 つの新機能 次の記事：HTML5プレースホルダー属性の詳しい説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート