本記事では、テキストエリアの入力枠の下に入力した文字数を表示するJavaScriptの実装方法を紹介します。
この機能により、テキストの入力制限をかけている場合に「でも今どのくらい入力していて、
どの程度減らせばいいかわからない」といった事態を解消することが可能です。
フォームのユーザビリティ向上に繋がります。
機能の全体像
この機能は、指定したnameのテキストエリアの下に入力した文字数の表示を追加します。
具体的には、以下の要素と仕組みで実現されます。
- ・JavaScript:
- 指定した名前のテキストエリアの下に文字数を表示します。
- 入力文字をカウントして文字数を表示しますが、SPIRALの入力制限に合わせて改行も1文字と換算します。
最大、最小文字数の制限自体はJavaScriptではなく、SPIRALの入力制限で行います。
- ・CSS (任意):
文字数を超えた場合に赤色に文字色を変更します。
これにより、ユーザーが入力した文字数を計算してオーバーするとCSSで
指定した変化（赤文字化）が起こる仕様となります。
最大、最小文字数の制限制限自体はフォームブロックのフィールド設定にて実装ください。
1. JavaScriptコードの記述
JavaScriptコードです。このコードをフォームブロックのJSタブに設置してください。
document.addEventListener('DOMContentLoaded', function () {
// ▼ 対象 textarea と最大文字数の設定
const textareaSettings = {
f0X1: 10,
f0X2: 12,
};
const textareas = document.querySelectorAll('textarea');
textareas.forEach(function (textarea) {
const maxLength = textareaSettings[textarea.name];
// name が未設定、または設定がない場合は処理しない
if (!maxLength) {
return;
}
// 文字数表示用要素を生成
const countElement = document.createElement('div');
countElement.className = 'js-char-count';
// textarea の直後に挿入
textarea.insertAdjacentElement('afterend', countElement);
// 表示・エラー判定処理
function updateCount() {
const currentLength = textarea.value.length;
countElement.textContent = currentLength + ' / ' + maxLength + '文字';
if (currentLength > maxLength) {
textarea.classList.add('maxLength-error');
countElement.classList.add('maxLength-error');
} else {
textarea.classList.remove('maxLength-error');
countElement.classList.remove('maxLength-error');
}
}
// 初期表示
updateCount();
// 入力時に更新
textarea.addEventListener('input', updateCount);
});
});
【編集箇所】JavaScript
const textareaSettingsの配列に文字数表示が必要なテキストエリアの識別名と文字数を記載してください。例：テキストエリアの識別名がf0X1で文字数が10文字の場合
f0X1: 10,
カンマ（,）区切りで指定を増やすことで適応させるテキストエリアの数を増やすことが可能です。
// ▼ 対象 textarea と最大文字数の設定
const textareaSettings = {
f0X1: 10,
f0X2: 12,
};
2. CSSの記述 (任意)
文字数を超過した場合に特定のスタイルを適用したい場合は、JavaScriptコード内で指定するCSSクラス名（
maxLength-error）に対応するスタイルを別途定義してください。
文字数超過時ではなく文字枠のデザイン自体を変える場合は（
js-char-count）に
対応するスタイルを別途定義してください。
以下はCSSの記述例です。
.maxLength-error{
color: #cc0000;
}
表示形式の変更
テキストエリアの下に表示される文字は【[現在の入力文字数] / [最大文字数]文字】の表記になっていますが、現在の記載文字数がわかればよく、最大文字数の表記が不要な場合は
JavaScriptの下記指定部分を変更ください。
【[現在の入力文字数]文字】と表記を変更することが可能です。
変更前
countElement.textContent = currentLength + ' / ' + maxLength + '文字';
変更後
countElement.textContent = currentLength + '文字';
まとめ
本記事では、JavaScriptを使用してテキストエリアの文字数を計算、表示する方法を紹介しました。
この実装により、ユーザーが今どのくらい記載しているか、どのくらい調整すればいいかを
認識することができ、フォームの使い勝手を向上させることができます。
このサンプルコードをベースに、実際の要件に合わせてカスタマイズしてみてください。
