入力文字数をカウントするテキストエリアを作る方法
入力文字数をカウントするテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、テキストエリアへ入力されている文字数をリアルタイムで表示します。文字を入力するとカウントが増え、削除すると減るため、現在の入力文字数を確認しながら文章を作成できます。
お問い合わせ画面、会員サイトのプロフィール編集、ECサイトの備考欄、管理画面のメモ入力など、文章量を利用者へ分かりやすく伝えたい場面で活用できます。入力中の文字数がすぐに表示されるため、利用者は文章の長さを把握しやすくなり、入力内容を調整しながらフォームへ記入できます。
タイトル、説明文、ラベル、プレースホルダーはHTMLから変更でき、CSSではフォームの横幅、テキストエリアの高さ、余白、枠線、角丸、文字数表示の色や位置を調整できます。JavaScriptではテキストエリアの入力内容から文字数を取得して表示するため、外部ライブラリを使わずに導入できます。スマートフォン・タブレット・PCで利用できるレスポンシブ対応のサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した文字数がリアルタイムで表示されます。
入力文字数： 0 文字
テキストエリアへ文章を入力してください。入力や削除に合わせて、現在の文字数がリアルタイムで表示されます。
コードをコピーして使おう！
<!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="textarea-character-counter_wrap">
<!-- タイトル -->
<div class="textarea-character-counter_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="textarea-character-counter_text">
入力した文字数がリアルタイムで表示されます。
</p>
<!-- 入力項目 -->
<div class="textarea-character-counter_group">
<!-- ラベル -->
<label
class="textarea-character-counter_label"
for="message">
内容
</label>
<!-- 文字数をカウントするテキストエリア -->
<textarea
id="message"
name="message"
class="textarea-character-counter_input"
placeholder="お問い合わせ内容を入力してください。"></textarea>
<!-- 現在の入力文字数 -->
<p class="textarea-character-counter_count">
入力文字数：
<span
id="character-count"
class="textarea-character-counter_number">0</span>
文字
</p>
</div>
</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は入力フォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、文字数表示の位置や表示内容を変更できます。
style.cssはフォーム全体のデザインを設定するファイルです。横幅、高さ、余白、背景色、文字色、枠線、角丸、文字数表示の色やサイズなどを変更できます。
script.jsはテキストエリアへ入力された文字数を取得し、画面へリアルタイムで表示する処理を担当します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアへ文字を入力すると、入力や削除に合わせて現在の文字数が自動で更新されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、文字数表示の文言を変更できます。用途に合わせてお問い合わせフォーム、コメント欄、メモ欄などへ変更できます。
style.cssではフォーム全体の横幅、余白、背景色、文字色、枠線、角丸、テキストエリアの高さ、文字数表示の色やサイズを変更できます。
script.jsでは文字数の取得方法や表示先を変更できます。別の入力欄へ適用したり、表示形式を変更したりすることも可能です。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:10px;
ラベル・入力欄・文字数表示の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
min-height:180px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下14pxを大きくすると入力欄が高くなり、左右16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
transition:0.3s;
枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
font-size:18px;
文字数表示の数字部分の文字サイズです。値を大きくすると数字が目立ち、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小されます。また、640px以下ではpaddingやテキストエリアの高さを調整するmedia queryを実装しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント