フォームの入力文字数をリアルタイムでカウントする方法
フォームの入力文字数をリアルタイムでカウントする方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、ユーザーが入力した文字数をリアルタイムで画面へ表示する方法をサンプルコード付きで解説します。お問い合わせフォームやレビュー投稿、プロフィール入力など、文字数を意識しながら入力してもらいたい場面で役立つ機能です。
このサンプルコードを利用すると、入力内容に応じて現在の文字数を自動で更新し、何文字入力したかをすぐに確認できます。HTMLでフォームを作成し、JavaScriptで入力イベントを監視して文字数を表示するシンプルな構成のため、既存のフォームにも組み込みやすく、デザインもCSSで自由にカスタマイズできます。
入力文字数のリアルタイム表示は、お問い合わせフォーム、コメント投稿フォーム、アンケート、レビュー投稿画面など、さまざまな入力フォームで利用されています。現在の入力状況を分かりやすく表示することで、ユーザーの利便性向上や入力ミスの防止にもつながります。コピペで使える実用的なサンプルを探している方にもおすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した文字数をリアルタイムで表示します。
コードをコピーして使おう！
<!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="form-character-count_wrap">
<!-- タイトル -->
<div class="form-character-count_title">
お問い合わせフォーム
</div>
<!-- 説明文 -->
<p class="form-character-count_text">
入力した文字数をリアルタイムで表示します。
</p>
<!-- 入力欄 -->
<div class="form-character-count_field">
<label class="form-character-count_label" for="form-character-count-message">
お問い合わせ内容
</label>
<!-- maxlength を変更すると入力できる最大文字数を変更できる -->
<textarea
class="form-character-count_input"
id="form-character-count-message"
name="message"
maxlength="100"
placeholder="お問い合わせ内容を入力してください"
></textarea>
<!-- 現在の入力文字数を表示するエリア -->
<div class="form-character-count_counter">
<span id="form-character-count-current">0</span> / 100文字
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>ファイル構成と設置方法
このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。
sample/
├── index.html
├── style.css
└── script.js
index.html をブラウザで開くと、フォームの入力文字数をリアルタイムでカウントする動作を確認できます。文字数の上限を変更したい場合は、HTML内の maxlength と表示用の 100文字 の部分を変更してください。
コメント