ページを開くと自動でフォーカスするテキストフィールドを作る方法
テキストフィールドへ文字を入力してもらう画面では、ページを開いた直後から入力欄を操作できる状態にしておくと、ユーザーが入力欄をクリックする手間を減らせます。このサンプルでは、ページを表示すると「お名前」のテキストフィールドへ自動的にフォーカスする入力欄を作成します。
JavaScriptのfocus()を使って対象のテキストフィールドへフォーカスを移動し、ページを開いた直後から文字を入力できる状態にします。フォーカス中は枠線と外側の強調表示が青色へ変わるため、現在入力対象になっているテキストフィールドも確認しやすくなっています。
お問い合わせフォームの名前入力、検索画面のキーワード入力、管理画面の検索欄など、ページを開いたあと最初に操作してもらいたい入力項目が決まっている場面で利用できます。HTMLで入力欄を配置し、CSSでデザインを整え、JavaScriptでページ表示時のフォーカス処理を行うシンプルな構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとテキストフィールドへ自動的にフォーカスします。
ページを開くと「お名前」のテキストフィールドへ自動的にフォーカスします。「もう一度確認する」を押すと、フォーカスする動作を再確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォン・タブレット表示へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>自動でフォーカスするテキストフィールド</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 自動フォーカスするテキストフィールド全体 -->
<div class="autofocus-text-box_wrap">
<!-- 入力エリアのタイトル -->
<div class="autofocus-text-box_title">
お名前を入力
</div>
<!-- 入力方法を案内する説明文 -->
<p class="autofocus-text-box_text">
ページを開くとテキストフィールドへ自動的にフォーカスします。
</p>
<!-- テキストフィールドのラベル -->
<label
class="autofocus-text-box_label"
for="autofocus-text-box-name">
お名前
</label>
<!-- 自動でフォーカスするテキストフィールド -->
<input
class="autofocus-text-box_input"
id="autofocus-text-box-name"
name="name"
type="text"
placeholder="お名前を入力してください。">
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、ラベル、1行入力用のテキストフィールドを配置し、CSSで入力欄のレイアウトやデザインを設定します。JavaScriptではページを開いたときに対象のテキストフィールドへフォーカスし、すぐに文字を入力できる状態にします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストフィールド全体を構成するファイルです。タイトル、説明文、ラベル、入力欄の内容を編集できます。入力項目の用途に合わせて、お名前、会社名、検索キーワードなどへ変更できます。
style.cssはテキストフィールド全体と入力欄のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、枠線、角丸、フォーカス時の枠線色や外側の強調表示などを変更できます。
script.jsはページを開いたときにテキストフィールドへ自動的にフォーカスする処理を行うファイルです。focus()を実行することで、入力欄をクリックしなくても文字を入力できる状態にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページが表示されると「お名前」のテキストフィールドへ自動的にフォーカスし、そのまま文字を入力できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、placeholder属性、name属性、id属性を変更できます。自動フォーカスする入力欄を変更する場合は、index.htmlのid属性とscript.jsのgetElementById()で指定しているidを同じ値へ変更してください。
style.cssではフォーム全体の横幅、背景色、余白、文字サイズ、枠線、角丸、テキストフィールドの大きさ、フォーカス時の枠線色や外側の強調表示などを用途に合わせて調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくするとフォームと画面上端・下端との間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。左右のautoによってフォームを中央へ配置しています。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外枠との間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:28px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。30pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
margin-bottom:10px;
ラベルとテキストフィールドの間隔です。値を大きくすると上下の間隔が広がり、小さくすると近づきます。
padding:14px 16px;
テキストフィールドの内側余白です。上下の14pxを変更すると入力欄の高さが変わり、左右の16pxを変更すると入力文字と枠線との間隔が変わります。
border:2px solid #cbd5e1;
テキストフィールドの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストフィールドの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
テキストフィールドへ入力する文字のサイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
box-shadow:0 0 0 4px rgba(37,99,235,.12);
フォーカス時にテキストフィールドの外側へ表示する強調表示です。4pxを大きくすると強調表示が太くなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小表示されます。画面幅640px以下ではページ全体の余白を24px 12px、フォーム全体の内側余白を24px 18px、タイトルの文字サイズを24px、テキストフィールドの内側余白を13px 14pxへ変更し、スマートフォンでも見やすく表示できるように調整しています。
コメント