入力文字数をカウントするテキストボックスを作る方法
お問い合わせ内容を入力する複数行のテキストボックスへ、現在の入力文字数をリアルタイムで表示する方法を紹介します。文字を入力するたびにJavaScriptが入力内容の長さを取得し、入力欄の下に「0文字」「15文字」のように現在の文字数を表示します。
お問い合わせ画面、質問フォーム、会員サイトのメッセージ入力、管理画面の備考欄など、ある程度まとまった文章を入力する場面で利用できます。利用者が現在の文章量を確認しながら入力できるため、内容を短くまとめたい場合や、入力状況を分かりやすく案内したい場合に役立ちます。
サンプルはHTML・CSS・JavaScriptの3ファイルで構成し、外部ライブラリを使用せずに動作します。HTMLではお問い合わせ内容のラベルや案内文を変更でき、CSSでは複数行入力欄の高さ・余白・角丸・文字数表示の色を調整できます。入力欄は画面幅に合わせて縮小するため、スマートフォン・タブレット・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="input-character-count-textbox_wrap">
<!-- タイトル -->
<h1 class="input-character-count-textbox_title">
お問い合わせ
</h1>
<!-- 説明文 -->
<p class="input-character-count-textbox_text">
入力したお問い合わせ内容の文字数がリアルタイムで表示されます。
</p>
<!-- 入力エリア -->
<div class="input-character-count-textbox_group">
<!-- ラベル -->
<label
class="input-character-count-textbox_label"
for="contact">
お問い合わせ内容
</label>
<!-- テキストエリア -->
<textarea
id="contact"
class="input-character-count-textbox_input"
placeholder="お問い合わせ内容を入力してください"></textarea>
<!-- 文字数表示 -->
<p class="input-character-count-textbox_counter">
入力文字数：
<span id="character-count">0</span>
文字
</p>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。お問い合わせ内容を入力する複数行のテキストボックスへ文字を入力すると、JavaScriptが現在の文字数を取得し、入力欄の下へリアルタイムで表示します。外部ライブラリは使用しておらず、そのままブラウザで動作を確認できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
お問い合わせフォームのタイトル・説明文・複数行入力欄・文字数表示を配置しています。ラベルや案内文、プレースホルダーなどを変更できます。
style.css
フォーム全体のデザイン、テキストエリアの見た目、文字数表示、レスポンシブ表示を管理しています。色や余白、角丸、文字サイズなどを自由に変更できます。
script.js
入力イベントを監視し、入力文字数を取得してリアルタイムで画面へ表示します。
設置方法・使い方
sampleフォルダ内へ3ファイルを配置します。
ブラウザで sample/index.html を開くと利用できます。
お問い合わせ内容へ文字を入力すると、現在の入力文字数が自動で更新されます。
カスタマイズできる内容
index.htmlではタイトル・説明文・ラベル・プレースホルダーを変更できます。
style.cssではフォーム幅・背景色・枠線・文字サイズ・余白・角丸・文字数表示の色を変更できます。
script.jsでは表示方法や文字数表示の形式を変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
min-height:140px;
テキストエリアの最低高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:32px;
フォーム全体の内側余白です。値を変更するとコンテンツ周辺の余白が変わります。
transition:border-color 0.3s ease;
0.3秒で枠線色を切り替えます。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
style.cssでレスポンシブ対応しています。width:100%、max-width:700px、@media (max-width:640px)を使用し、画面幅に応じてフォームや余白、テキストエリアの高さを自動調整します。スマートフォン・タブレット・PCで利用できます。
コメント