テキストボックスに入力中に、その文字数をリアルタイムに表示するというjQueryのコード。
※会社でニーズがあったので、このブログのプロジェクトとして「会社ニーズ」を登録。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テキストボックスの文字数をカウントして表示</title> <style> textarea { width:400px; height:150px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> jQuery(function($){ var showCnt = function(){ $('p').html($('textarea').val().length); }; showCnt(); $('textarea').on("keyup change", function(){ showCnt(); }); }); </script> </head> <body> <form> <p></p> <textarea name="textarea">テスト</textarea> </form> </body> </html> |
- 19行目はロードされたときにカウント表示をするために記述。
- 21行目にchangeを入れているのはスマホでkeyupを取れなかったときのための保険。