入力文字数を制限するテキストエリアを作る方法
入力文字数を制限するテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのtextarea要素へmaxlength属性を指定し、改行を含む文章を最大300文字まで入力できるフォームを作成します。JavaScriptを使用せず、HTMLとCSSだけで入力可能な文字数へ上限を設定できます。
お問い合わせ画面の相談内容、ECサイトの注文時に使用する備考欄、会員サイトのプロフィール紹介、管理画面のメモ入力などでは、長文を入力できるようにしながら文字数を制限したい場合があります。入力欄へ直接上限を設定することで、指定した文字数を超える入力を防ぎ、保存する文章量を一定の範囲に収められます。
入力できる最大文字数は、HTMLに記述しているmaxlength="300"の数値から変更できます。タイトル、説明文、ラベル、プレースホルダー、文字数に関する案内文も用途に合わせて編集できます。CSSではフォームの横幅、テキストエリアの高さ、余白、枠線、角丸、文字サイズなどを調整でき、スマートフォン・タブレット・PCで利用しやすいレスポンシブ対応の構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
テキストエリアへ300文字まで入力できます。
最大300文字まで入力できます。
テキストエリアへ文章を入力してください。300文字に達すると、それ以上は入力できなくなります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<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="limit-textarea-characters_wrap">
<!-- タイトル -->
<div class="limit-textarea-characters_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="limit-textarea-characters_text">
テキストエリアへ300文字まで入力できます。
</p>
<!-- 入力項目 -->
<div class="limit-textarea-characters_group">
<!-- ラベル -->
<label
class="limit-textarea-characters_label"
for="message">
内容
</label>
<!-- 300文字まで入力できるテキストエリア -->
<textarea
class="limit-textarea-characters_input"
id="message"
name="message"
maxlength="300"
placeholder="お問い合わせ内容を入力してください。"></textarea>
<!-- 文字数制限の案内 -->
<p class="limit-textarea-characters_note">
最大300文字まで入力できます。
</p>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtextarea要素へmaxlength="300"を指定し、複数行の文章を最大300文字まで入力できるテキストエリアを作成します。CSSではフォーム全体の横幅、余白、背景色、テキストエリアの高さ、枠線、角丸、フォーカス時の表示などを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、文字数制限の案内文を編集できます。テキストエリアへ指定しているmaxlength="300"によって、入力できる文字数を最大300文字までに制限します。
style.cssはフォーム全体とテキストエリアのデザインを設定するファイルです。横幅、余白、背景色、文字色、入力欄の高さ、枠線、角丸、フォーカス時の色や影、スマートフォン表示時のサイズを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたテキストエリアへ改行を含む文章を入力できます。入力文字数が300文字に達すると、それ以上は入力できなくなります。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、文字数制限の案内文を変更できます。入力できる最大文字数を変更する場合は、maxlength="300"の300を任意の数値へ変更し、画面に表示している「300文字」の案内文も同じ数値へ変更してください。
style.cssではフォーム全体の最大横幅、内側余白、背景色、角丸、テキストエリアの高さ、入力文字の行間、枠線色、フォーカス時の色や影を変更できます。resize:vertical;により、利用者はテキストエリアの高さを上下方向へ変更できます。
数値調整
index.html
maxlength="300"
テキストエリアへ入力できる最大文字数です。300を500へ変更すると最大500文字、100へ変更すると最大100文字まで入力できます。
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
gap:10px;
ラベル、テキストエリア、案内文の間隔です。値を大きくすると各要素の間隔が広がり、小さくすると狭くなります。
min-height:180px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストエリアをクリックしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小されます。また、640px以下ではページとフォームの余白を縮小し、テキストエリアの最低高さを160px、内側余白を13px 14pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント