jQueryで文字数のカウントと制限をリアルタイムに行う方法

2019年10月18日

テキストエリアなどの入力欄に、一定の文字数以上の場合は投稿できない、といった仕様にしたい場合があります。

その場合はユーザーに現在の文字数が見える状態でないと、非常にユーザビリティの悪い仕組みとなってしまいます。

今回は入力時にリアルタイムに文字数をカウントし、一定の文字数以上は送信できない（ボタンを無効化する）仕組みをデモ・サンプルコード付きで解説します。

まずは完成例をご確認ください

まずは今回紹介する文字数制限のリアルタイム制御をご確認ください。

文字を入力してみると、文字数のカウントが増えていくことが分かると思います。

ボタンは1文字以上、140文字以下で有効になります。（Twitterとほぼ同じ仕様です）

0 / 140

HTML

テキストエリアで文字数のカウントとボタンの制御を行います。

今回はtextareaでの実装ですが、<input type="text">型でも同じことが可能なので、1行入力の文字数を制御したい場合は覚えておきましょう。

<div class="cnt_area"><span class="now_cnt">0</span> / 140</div>
<textarea rows="5" class="sample"></textarea>
<input type="button" class="sample_btn" value="送信する" disabled>

CSS

CSSは、文字数の所に、投稿できない場合に文字を赤くして視覚的に分かりやすくする程度にしておきました。

投稿できない場合は「.cnt_danger」を付与し、文字を赤くします。

.cnt_area.cnt_danger{
    color: #FF0000;
}

JavaScript(jQuery)

最後にjQueryの処理です。

各種処理に対してコメントで解説を付けておりますので確認をお願いします。

<script>
jQuery(function($){
    //入力時のイベント    
    $('.sample').on('input', function(){
        //文字数を取得
        var cnt = $(this).val().length;
        //現在の文字数を表示
        $('.now_cnt').text(cnt);
        if(cnt > 0 && 140 > cnt){
            //1文字以上かつ140文字以内の場合はボタンを有効化＆黒字
            $('.sample_btn').prop('disabled', false);
            $('.cnt_area').removeClass('cnt_danger');
        }else{
            //0文字または140文字を超える場合はボタンを無効化＆赤字
            $('.sample_btn').prop('disabled', true);
            $('.cnt_area').addClass('cnt_danger');
        }
    });
    
    //リロード時に初期文字列が入っていた時の対策
    $('.sample').trigger('input');
    
    //ボタンクリック時　実運用時はsubmit送信などを行うと思います
    $('.sample_btn').click(function(){
        alert('送信できる状態です！');
    });
});
</script>

コメントにて解説していますが、jQueryの処理をふんだんに盛り込んだ処理となっていますので、各メソッド毎に解説した記事も是非ご確認ください。

[my_csv_list id=”1416,1581,1597,1621,1527″ type=”1″ bold=”1″ arrow=”1″]

空白の投稿を許したくない、または長文の投稿に対して制限をかけたい場合に便利な文字数カウントです。

文字数の変化をリアルタイムでユーザーに伝えることで、ユーザーに優しくUIの向上にも繋がりますね。

以上、jQueryで文字数のカウントと制限をリアルタイムに行う方法、でした。

jQuery