Web：textareaのmaxlength

概要

textarea で文字数制限をしたいことはよくあるのですが、現状では一筋縄ではいかないようです。
HTML5 では textarea の属性として maxlength が追加され、これを設定すれば事足りるのですが、HTML5 に対応していないブラウザ（IE8 以下）では、JavaScript を駆使して対応しないといけなくなります。

ホント、IE は早く消えて無くなってもらえないだろうか。。。。

jquery を使う方法

スクラッチで JavaScript で対応する方法ももちろんあるのですが、jquery を使う方が簡単なので、基本的にはこれがおすすめです。
ただ、日本語が絡むと挙動が微妙なので、基本的には HTML5 対応のブラウザを使うことをおすすめするべきですね。

下記の jquery のプラグインを使うと簡単に実現できます。

maxlength plugin

js ファイルを取得したら適当な場所に設置します。

 <script type="text/javascript" src="js/jquery.maxlength.js"></script>

例えば、40 文字の文字数制限を行いたい場合には、以下のように textarea のタグ内で属性を指定します。

 <textarea maxlength="40"></textarea>

さらに、この記述の後に以下のように記述して有効化します。
$('textarea') 指定だと、全ての textarea が対象となります。

 <script type="text/javascript">
 $('textarea').maxlength();
 </script>