DEVELOPERS BLOGデベロッパーズブログ
- HOME >
- 加藤 正人のデベロッパーズブログ >
- JavaScript で入力フィールドの文字カウンタを実装してみる
加藤 正人のデベロッパーズブログ
- 氏名
- 加藤 正人
- 役職
- 多分SE
- 血液型
- 秘密
- 出没
- 美味しいもののあるところ
- 特色
- タヒチ大好き。ちょいメタボ。
- 2020/12/15
- CakePHP3 のリダイレクトがうまく行かない例
- 2020/11/12
- Apache Bench
- 2020/10/05
- PhpSpreadsheet でExcel ファイルを読み込む (CakePHP3)
このところフォーム関連の仕事をしていて、入力文字数制限がある場合のチェック方法を検討してみた。
通常は CakePHP のバリデーション利用するので、フォームからサブミットして初めてバリデーションがかかる。これは入力項目が少ない場合はまだ良いが、10も20も入力項目がある場合はまとめてエラー通知されるよりは入力しているその場で判明する方が良いだろう。
そういうインターフェイスを持つフォームも多いのでネット検索していたら BlackFlag さんのサイトでサンプルを見つけた。
基本的には、テキスト入力ボックスとテキストエリアに対し keyup / keydown / keypress / change の各イベントをトリガーにして入力フィールドの文字数を取得し判断する方法だ。
ただし文字数の上限はフィールドごとに変更できるようにしたいので、文字数上限はクラス名として countdownNNN (NNN は1桁以上の整数) を渡すことで実行時に判断させるように修正してみた。
出来上がった jQuery コードは以下の通り。
$("input[type='text'][class*=countdown], textarea[class*=countdown]").bind('keydown keyup keypress change', function (){ var classes = $(this).attr('class').match(/countdown([0-9]+)/); var countMax = RegExp.$1; var thisValueLength = $(this).attr('value').length; var availableChars = countMax-thisValueLength; if ( $(this).siblings('span.counter').length == 0 ) { $(this).after(' '); // カウンタ表示領域が用意されていなければ追加する } $(this).siblings('span.counter').text('(残り '+availableChars+' 文字)'); if ( availableChars <= 0 ) { $(this).siblings('span.counter').css('color', '#c00000'); // カウンタが負数の場合は赤字表示 $(this).addClass('form-error'); } else { $(this).siblings('span.counter').css('color', ''); if ( $(this).siblings('div.error_msg').length == 0 ) { $(this).removeClass('form-error'); } } }).keydown();
このコードを実装したフォームでテキスト入力要素の class 指定に countdown16 とか countdown500 のようにすることで、前者は16文字までのカウントダウン、後者は500文字までのカウントダウンが表示される。コード末尾の .keydown() は、フォームロード時に各入力欄の残り文字数を初期表示させるために付け加えてある。これを省略した場合は、入力欄に入力するまでは残り文字数は表示されない。
カウントダウンエリアは用意されていなければ当該入力フィールドの直後に class="counter" を指定された span 要素 として挿入される。ただし、当該入力フィールドの兄弟位置に class="counter" を持つ要素があればそこに表示する。
なお、クラス文字列から countdownNNN というパターンの検出はあまり厳密ではないので他のクラスと衝突するかもしれないので注意。
関連エントリー
- 2020/07/03
- YOLP (Yahoo! Open Local Platform) のサービス縮小
- 2017/12/02
- iframe の中身の動的切り替え
- 2017/09/06
- CakePHP 2.x の Cookie と js.cookie.js
- 2017/07/08
- 時刻入力用 jQuery Plugin TimePicki の不具合調整
- 2017/04/30
- jQuery プラグイン「Touch Punch」
- 2016/03/12
- Safari のフォームボタンと jQuery submit()
- 2015/12/19
- スマホ向けサイトの click と touch
- 2015/11/07
- JavaScript でのクロージャからの外部変数参照
- 2015/06/27
- jQuery 無限スクロールのメモ
- 2014/11/08
- Google Maps で郵便番号⇒住所変換
- 2014/10/11
- Google Chart へのアクセスをヘルパーで実装してみる【その2】
- 2014/02/22
- IE8 と style 値でハマった話
- 2013/10/22
- Google Maps Javascript API V2 提供終了
- 2013/09/17
- Google Bot と JavaScript
- 2013/08/17
- jQuery UI Dialog と z-index
- 2013/08/10
- IE と IFRAME のワナ
- 2013/06/08
- IE のワナ (script タグの type 属性値)
- 2013/06/01
- jQuery UI ボタンと IE8 のワナ
- 2013/05/17
- jQuery v2 は IE6/7/8 をサポートしない!
- 2013/05/11
- 「JavaScript でバリデーション」を拡張したい
- 2013/03/23
- IE10 と CKEditor
- 2013/03/09
- JavaScript でバリデーション
- 2012/12/08
- SyntaxHighlighter ではまった話
2020/12/15
2020/11/12
2020/10/05
2020/09/11
2020/08/03