ページを開くと自動でフォーカスするテキストエリアを作る方法
ページを開いたときに、テキストエリアへ自動でフォーカスする方法を紹介します。通常は入力欄をクリックしてから文字を入力しますが、このサンプルではページを表示した直後からテキストエリアが入力できる状態になります。最初に入力してもらいたい項目が決まっているフォームで、クリック操作を減らしたい場合に利用できます。
HTMLでは複数行入力用の<textarea>を配置し、CSSで入力欄の横幅や高さ、枠線、フォーカス時の表示を整えます。JavaScriptではfocus()を使い、ページを開いたときに対象のテキストエリアへフォーカスを移動します。フォーカス中は枠線と外側の強調表示が青色へ変わるため、現在入力できる場所も確認しやすくなっています。
お問い合わせフォームの内容入力、コメント欄、プロフィール編集、管理画面のメモ入力など、ページを開いたあと最初に長い文章を入力してもらいたい場面で活用できます。テキストエリアなので改行を含む複数行の文章を入力でき、右下をドラッグして高さを変更することもできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとテキストエリアへ自動的にフォーカスします。
ページを開くと「お問い合わせ内容」のテキストエリアへ自動的にフォーカスします。「もう一度確認する」を押すとフォーカスする動作を再確認できます。テキストエリアには改行を含む複数行の文章を入力できます。
コードをコピーして使おう！
<!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-textarea_wrap">
<!-- 入力エリアのタイトル -->
<div class="autofocus-textarea_title">
お問い合わせ内容を入力
</div>
<!-- 入力方法を案内する説明文 -->
<p class="autofocus-textarea_text">
ページを開くとテキストエリアへ自動的にフォーカスします。
</p>
<!-- テキストエリアのラベル -->
<label
class="autofocus-textarea_label"
for="autofocus-textarea-message">
お問い合わせ内容
</label>
<!-- 複数行入力用のテキストエリア -->
<textarea
class="autofocus-textarea_input"
id="autofocus-textarea-message"
name="message"
placeholder="お問い合わせ内容を入力してください。"
></textarea>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、ラベル、複数行入力用のテキストエリアを配置します。CSSではテキストエリア全体のレイアウトや配色、余白、枠線、フォーカス時の表示を設定し、JavaScriptではページを開いたときにテキストエリアへ自動的にフォーカスします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストエリア全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、name属性、id属性などを編集できます。お問い合わせ内容、コメント、メモなど、用途に合わせた複数行入力欄へ変更できます。
style.cssはテキストエリア全体と入力欄のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、枠線、角丸、入力欄の高さ、フォーカス時の枠線色や外側の強調表示などを変更できます。
script.jsはページを開いたときにテキストエリアへ自動的にフォーカスするファイルです。focus()を実行することで、入力欄をクリックしなくても文字を入力できる状態にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページが表示されると「お問い合わせ内容」のテキストエリアへ自動的にフォーカスし、そのまま複数行の文章を入力できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、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;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると近づきます。
min-height:160px;
テキストエリアの最小高さです。値を大きくすると最初から入力欄が高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを変更すると入力文字と上下の枠線との間隔が変わり、左右の16pxを変更すると左右の間隔が変わります。
border:2px solid #cbd5e1;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
テキストエリアへ入力する文章の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
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へ変更し、スマートフォン・タブレット・PCで利用できるように調整しています。
コメント