jqueryを使ってフォームに入力された文字数をチェックする
- カテゴリー：
- javascript
以前、仕事で簡易的に作ったのですが、テキストフィールドとかに入力された文字数のチェックをして、何文字入力されたかを表示し、制限以上の文字数が入力されれば、なんらかの警告を出すといった処理の作り方をご紹介いたします。
※html側でjqueryを読み込んでいるのが前提です。
まず、HTMLを以下のように記述します。
|
1 2 3 4 |
<div class="form_item"> <input name="text01" class="count_check" type="text" /> <p class="note">※50文字以内（<span class="count">0</span>/<span class="limit">50</span>）</p> </div> |
inputタグ、もしくはtextaraタグにクラス「count_check」を設定し、その下にクラス「note」を設定したタグ（divなどでOK）を用意し、その中にクラス「count」、クラス「limit」を設定したタグを用意します。
クラス「count」内に現在何文字入力されているかを表示するので、初期値として0(半角数字)を入力します。
クラス「limit」内の数字(半角数字)は何文字まで入力できるのかをチェックするための数字を入力します。
上記のサンプルコードでは50文字以内の文字入力が許容範囲になります。
次に、javascriptです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() { $('.count_check').bind('keydown keyup keypress change',function(){ var input_count = $(this).val().length; var limit = $(this).next(".note").find(".limit").text(); $(this).next(".note").find(".count").html(input_count); if( input_count > limit ) { // 文字制限を超過した場合の処理 $(this).next(".note").find(".count").css("color","#c00").css("font-weight","bold"); } else { $(this).next(".note").find(".count").css("color","").css("font-weight",""); } }); }); |
クラス「count_check」が設定されたタグで文字が入力されたら処理が実行されます。
変数「input_count」に入力された文字数が代入されます。
変数「limit」に文字が入力されたフォームは何文字までを許可しているのかをチェックする為の数字が代入されます。（このサンプルでは50）
次にHTML側のクラス「count」が設定されたタグの中に変数「input_count」の内容を代入します。
最後にif文で入力された文字数がlimitを超えている場合とそうでない場合の処理を書きます。
今回は、文字制限を超過した場合にクラス「count」内の数字を赤い太文字に変更しています。
文字制限を超過した際の処理は、工夫次第で色々できるとは思いますが、今回は控えめにcssの変更のみで処理を書きました。
この処理は変数「count_check」が設定されていればいくつでも設定できますので、まぁまぁ実用的かなぁーなんつって（・ｘ・；
サンプルはコチラ
