WEB制作、マーケティングに関する情報をお届けします。

入力フォームを使用時にユーザーに対して入力して欲しい文字数と入力された文字数を常時する方法を紹介します。必要な文字数に達した場合に視覚的にわかるようにします。

コードの紹介

<textarea id="txt_count" name="text" rows="5" cols="30"></textarea>
<span id="txt_count_out"><span id="txt_count_out_num">0</span>/50</span>
<script>
document.addEventListener('DOMContentLoaded', function() {
    //IDからカウント用のパーツを設定
    var textarea = document.getElementById('txt_count');
    var countOutNum = document.getElementById('txt_count_out_num');
    //カウントが規定を超えた場合に視覚的にわかるようにするためカウント部分を内包するタグを指定
    var countOut = document.getElementById('txt_count_out');
    //最大入力値を設定
    var minLength = 50; 

    // テキストエリアの入力イベントを監視
    textarea.addEventListener('input', function() {
        var textLength = textarea.value.length; // 現在の文字数を取得
        countOutNum.textContent = textLength; // 文字数をリアルタイムで表示

        // 文字数が50を超えた場合、背景色を緑に変更
        if (textLength > minLength) {
            countOut.style.color = 'green';
        } else {
            countOut.style.color = ''; // 元の色に戻す（必要に応じてデフォルトの色を設定）
        }
    });
});
</script>

コードを解説

HTML部分は説明を割愛します。
textareaにカウント用のIDとして『txt_count』、出力先には『txt_count_out_num』を振っています。
以下で、IDを設定します。

var textarea = document.getElementById('txt_count');
var countOutNum = document.getElementById('txt_count_out_num');

カウントが規定を超えた場合に視覚的にわかるようにするためカウント部分を内包するタグのIDを設定します。

var countOut = document.getElementById('txt_count_out');

最大入力値を設定します。

var minLength = 50;

『xxx.addEventListener(‘input’, function() {});』で入力フォームの監視が可能です。

textarea.addEventListener('input', function() {});

『xxxx.value.length』で現在の文字数を取得、『xxxx.textContent』で現在の入力文字数を出力します。

var textLength = textarea.value.length; // 現在の文字数を取得
countOutNum.textContent = textLength; // 文字数をリアルタイムで表示

現在の入力文字数と設定した文字数を比較して、cssでスタイルを変更します。

if (textLength > minLength) {
    countOut.style.color = 'green';
} else {
    countOut.style.color = ''; // 元の色に戻す（必要に応じてデフォルトの色を設定）
}

まとめ

以上、『Javascriptで入力文字数を常時表示、必要な文字量に達したらユーザーに知らせる方法』でした。フォームの最適化で使用する場面も多いので覚えてくといいでしょう。