【jQuery】リアルタイムで入力したテキストの文字数をカウントする方法
jQuery
リアルタイム
文字数カウント
お問い合わせフォームなどは容量の関係で文字数を制限することもあるのではないでしょうか。
その場合、今何文字入力しているのかリアルタイムで表示出来ると凄く親切ですね。
この記事ではjQueryを使い、リアルタイムで入力したテキストの文字数をカウントする方法をご紹介したいと思います。
完成コード
まずは完成コードを見てみましょう。
$(function(){
$('#comment').on('input', function() {
let textVal = $(this).val().replace(/\s/g, '');
let textLength = textVal.length;
$('#charCount').text(textLength);
});
});実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
ここからはコードの解説です。
$('#comment').on('input', function() { ... });#commentのフィールドに対してinputイベント、つまり入力フィールドにテキストが入力や削除があった場合に実行されます。
let textVal = $(this).val().replace(/\s/g, '');#commentのフィールドに入力されたテキストを取得して、その中の改行や空白を正規表現を使って取り除きます。
正規表現で改行や空白は/\s/gと指定します。
改行や空白を取り除かないとそれらも1文字として扱われてしまいます。
let textLength = textVal.length;取得したテキストのうち、改行や空白を取り除いた状態の文字数を取得します。
$('#charCount').text(textLength);取得した文字数を#charCountに出力します。
まとめ
いかがでしたか？
入力した文字数をカウントする機会は意外と多いかもしれません。
今回ご紹介したコードはコピペですぐに使うことが出来るので是非ご活用ください。
