×

jQueryで文字数をカウント(空白・改行は除外)して表示させる方法【カウントアップ・カウントダウン】

2016年2月22日 コーディング

数字

入力フォームで入力した文字数をカウントしてリアルタイムで表示させたいことありますよね。

そんな時はjQueryを使えば簡単に実現可能です。うーん、jQuery万能です。

入力された文字数をそのまま表示させる方法(カウントアップ)

入力欄に入力された文字数をそのままカウントして表示させてみます。

サンプルで動作を確認

最初に、下記のDEMO1サンプルで動作を確認しましょう。

DEMO1

文字カウントデモキャプチャ

DEMO1のページで実際に文字を入力すると、入力した文字数がカウントされて右下に”現在○○文字”というように表示されます。

なお、下記のような入力条件を設けています。

  • 全角半角にかかわらず1文字カウント
  • スペース・改行は文字数にカウントしない
  • 入力したテキストが100文字を超えると赤文字で「100文字を超えています」というアラートが表示される

htmlでコーディング

まずはhtmlでコーディングです。

テキストを入力してください。

※入力テキストが100文字を超えると、赤文字で「100文字を超えています」というアラートが表示されるようになっています。

textareaタグで文字入力欄を用意します。

  • count_num…入力文字数表示用クラス
  • count_alert…アラート表示用クラス

また、上記のクラスを用意し、中身は空の状態にしておきます。

CSSで装飾する

htmlを組んだら、CSSで見た目を整えていきます。

#counter_block {
    width: 650px;
}

#counter_block textarea{
    border: 1px solid #bbbbbb;
    min-height: 250px;
    font-size: 16px;
    width: 100%;
    line-height: 20px;
    padding: 10px;
    margin:0 0 5px 0;
    box-shadow: none;
    resize: both;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

#counter_block textarea#input_text{
    min-height: 150px;
}

#counter_block .count_num {
    font-weight: bold;
    display: block;
    margin:0 0 5px 0;
}

#counter_block .count_alert {
    color:#ff0000;
    font-weight: bold;
    display: block;
}

CSSに関しては特別なことはしていませんが、ここではtextareaはmin-heightを記述して縦幅に下限を設定しています。

また、resizeプロパティでbothを指定することでtextareaの高さと横幅を可変にしています。

【参考:resizeプロパティの値】

  • 高さと横幅両方を可変にする:both;
  • 横幅だけを可変にする:horizontal;
  • 高さだけを可変にする:vertical;

jQueryで文字数カウントを表示させる

jQueryを使って入力された文字数を表示させます。






初期状態での文字数取得・表示
初めに.val()でtextareaのテキストを取得して、変数txtへ格納します。さらに、変数txtを.trim()と.replace()で空白・改行を削除してnew_txtへ再格納します。

new_txtの中身の文字数を.lengthで取得して、変数counterに格納します。.html()で取得した文字数を表示させます。

入力時の文字数取得・表示、アラート表示
.bind()を使って文字入力されたときの文字数取得・表示を実現します。

文字数を取得して、表示させるところまでは、上記の初期状態の時と同じです。
その後に、if~elseで、入力文字数が100文字を超えたら「100文字を超えています」というアラートを表示させ、それ以外は何も表示しないようにします。

あらかじめ設定した文字数から入力された文字数を減らして表示させる方法(カウントダウン)

初めに基準となる文字数を設定しておき、入力された文字数を初めに設定した文字数から引いた数字を表示させます。(例えば100文字を基準として、文字を入力すると99、98、97…とカウントダウンする)

サンプルで動作を確認

最初に、下記のDEMO1サンプルで動作を確認しましょう。

DEMO2

文字カウントダウン1

DEMO2のページで実際に文字を入力すると、設定した文字数上限 – (入力した文字数)が右下に”現在○○文字”というように表示されます。

文字カウントダウン2

設定した文字数上限を超える文字数を入力すると、OK!のアラートが表示されます。

DEMO2での入力条件は下記の通り。

  • 全角半角にかかわらず1文字カウント
  • スペース・改行は文字数にカウントしない
  • 上限を200文字として、入力した文字数が200からマイナスされて表示される
  • 入力したテキストが200文字を超えると赤文字で「OK!」というアラートが表示される

htmlでコーディング

htmlでコーディングです。

 テキストを入力してください。

※200文字以上入力すると右下に赤色でOK!の文字が表示されます。

CSSで装飾する

DEMO1と同様にhtmlを組んだら、CSSで見た目を整えていきます。

#counter_block {
    width: 650px;
}

#counter_block textarea{
    border: 1px solid #bbbbbb;
    min-height: 250px;
    font-size: 16px;
    width: 100%;
    line-height: 20px;
    padding: 10px;
    margin:0 0 5px 0;
    box-shadow: none;
    resize: both;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

#counter_block textarea#input_text{
    min-height: 150px;
}

#counter_block .count_num {
    font-weight: bold;
    display: block;
    margin:0 0 5px 0;
}

CSSに関してはDEMO1とほぼ同じです。

jQueryで文字数カウントを表示させる

jQueryを使って上限文字数から入力された文字数を引いた数字を表示させます。






初期状態での文字数取得・表示
初めに.val()でtextareaのテキストを取得して、変数txtへ格納します。さらに、変数txtを.trim()と.replace()で空白・改行を削除してnew_txtへ再格納します。

countMaxという変数に、上限文字数200を格納します。countMaxから.lengthで取得したnew_txtの文字数を引いた数字をcountDownに格納します。

.html()で取得した文字数を表示させます。

入力時の文字数取得・表示、アラート表示
.bind()を使って文字入力されたときの残りの文字数取得・表示を実現します。

文字数を取得して、表示させるところまでは、上記の初期状態の時と同じです。
その後に、if~elseで、残り文字数(200 - 入力文字数)が0以下になった時に赤文字で「OK!」というアラートを表示させ、それ以外は通常通り残り文字数を表示させます。

まとめ

いかがでしたか?

思ったよりも簡単に文字カウンターを実現できました。一見難しそうに思えますが、仕組み・考え方が分かれば、さほど難しくはないでしょう。

短いコードの中にも.val()、.trim()、.replace()、.length()、.bind()、.html()、.css()といった様々なメソッドや、正規表現なども使用しているため、今回のソースコードを理解するだけでも、jQueryの知識が深まるのではないでしょうか。

関連記事