HTML、CSS、JavaScriptを使って実装したユーザーフレンドリーなテキストエリアのデモ

2024年1月15日
デモ
HTML/CSS, JavaScript

デモ

今回は、html、css、JavaScriptでテキストエリアに入力される文字数をリアルタイムでカウントし、残りの入力可能文字数をユーザーに知らせる機能を実装しました。さらに、文字数が限界に近づくにつれて、色で警告を与えたり、文字数に応じてテキストエリアの高さを可変にしたりすることで、ユーザーの入力体験を向上させることを意識して作成しました。

1 ソースコード例
2 実際の表示

ソースコード例

htmlソースコード

<div class="form-group">
	<label class="form-group__heading">
		テキストエリア01<span class="required-badge">必須</span>
	</label>
	<div class="form-content">
		<textarea id="textarea01" placeholder="入力してください。" maxlength="30"></textarea>
		<p id="textCount1" class="text-right">あと30文字</p>
	</div>
</div> 

<div class="form-group">
	<label class="form-group__heading">
		テキストエリア02<span class="required-badge">必須</span>
	</label>
	<div class="form-content">
		<textarea id="textarea02" placeholder="入力してください。" maxlength="100"></textarea>
		<p id="textCount2" class="text-right">あと100文字</p>
	</div>
</div> 

<div class="form-group">
	<label class="form-group__heading">
		テキストエリア03<span class="required-badge">必須</span>
	</label>
	<div class="form-content">
		<textarea id="textarea03" placeholder="入力してください。" maxlength="200"></textarea>
		<p id="textCount3" class="text-right">あと200文字</p>
	</div>
</div>

htmlの解説

各テキストエリアと関連する要素は独自のID（例：textarea01, textCount1）を持っており、これらはJavaScriptで特定のテキストエリアや文字数表示を特定するために使用されます。

maxlength属性はテキストエリアに入力可能な最大文字数を定義します。JavaScriptはこの値を使用して、入力された文字数と残りの文字数を計算します。

placeholder属性は、テキストエリアが空のときに表示されるテキストを提供します。

cssソースコード

.form-group:nth-of-type(n+2) {
    margin-top: 20px;
}
.form-group__heading {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 700;
}
.form-group__heading::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 30px;
    margin-right: 10px;
    border-radius: 5px;
    background-color: #094;
}
.required-badge {
    padding: 4px 8px;
    margin-left: 20px;
    font-size: 12px;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: #dc3545;
    text-align: center;
    border-radius: 3px;
}
.form-content {
    margin-top: 20px;
}
.text-right {
    text-align: right;
}
.form-group textarea {
    width: 100%;
    padding: 15px 10px;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid #d2d3d5;
    background-color: #fff;
}

JavaScriptソースコード

document.addEventListener('DOMContentLoaded', function () {
    const textareas = document.querySelectorAll('textarea');
    textareas.forEach(textarea => {
        textarea.addEventListener('input', function() {
            updateDisplay(this);
        });
        textarea.addEventListener('blur', function() {
            updateDisplay(this, true);
        });
        updateDisplay(textarea);
    });
});

function updateDisplay(textarea, isBlurEvent = false) {
    const maxLength = textarea.getAttribute('maxlength');
    const currentLength = textarea.value.length;
    const remaining = maxLength - currentLength;
    const countDisplay = document.getElementById(`textCount${textarea.id.substring(textarea.id.length - 1)}`);

    textarea.style.height = 'auto';
    textarea.style.height = textarea.scrollHeight + 'px';

    countDisplay.textContent = `あと${remaining}文字`;

    if (isBlurEvent && currentLength === 0) {
        countDisplay.style.color = '#dc3545';
    } else if (remaining <= 10 && remaining >= 0) {
        countDisplay.style.color = '#f5a623';
    } else if (remaining < 0) {
        countDisplay.style.color = '#dc3545';
    } else {
        countDisplay.style.color = currentLength > 0 ? '#28a745' : '#191919';
    }
}

JavaScriptの解説

ページ読み込み時やテキストエリアへの入力があるたびに、テキストエリアの高さが自動的に調整されます。これにより、テキストエリア内のテキストが常に完全に表示され、スクロールバーが不要になります。

ユーザーがテキストエリアに入力すると、そのテキストの文字数に応じて、残りの入力可能な文字数が計算され、画面に表示されます。

残り文字数が10文字以下になると文字色がオレンジ色に変わり（警告色）、文字数オーバー時には赤色（エラー色）で表示されます。

テキストエリアからフォーカスが外れたとき文字数表示の色が緑色（成功色）になります。（例えば、他の要素をクリックしたとき）

実際の表示

文字数確認用でコピペ用の文章を用意しているので、コピーして動作を確認してみてください。

30文字確認用テキスト

この文章は30文字で、文字数制限をテストすることができます。

テキストエリア01必須

あと30文字

100文字確認用テキスト

この文章は約100文字で構成されています。この文章を使って、テキストエリアの文字数制限機能が正しく機能しているかどうかを確認するのに適しています。さまざまな文字数の制限をテストする際に有用です。

テキストエリア02必須

あと100文字

200文字確認用テキスト

この文章は約200文字の長さです。長文の入力テストや文字数制限の機能確認に最適なダミーテキストです。文字数制限が正しく機能しているかを確認するために、テキストエリアこの文章を貼り付けてみてください。テキストエリアが指定された文字数制限に従って、入力を受け付けたり、それを超えた入力を制限したりするかを確認することができます。ユーザーインターフェースが快適に使えるかどうかもテストしてみてください。

テキストエリア03必須

あと200文字