ちょっと文字数をカウントしたいときのHTML

文字数をカウントしたかったのですが、手元のエディタでうまいことカウントできなかったので、昔書いたJavaScriptで文字数をカウントするコードを引っ張り出してきてみました。

Twitterが流行りはじめた頃でした。懐かしい。

以下はそのJavaScriptの利用例のために作ったプロジェクトです。

<a href="https://github.com/seriwb/web_edit">seriwb/web_edit</a>github.com

JavaScriptの方がメインなので、そちらの解説をした方が良い気がしますが、それほど難しいことでもないので流し見していただけたらと。

個人的には実際に使う方をかなり簡単にしたとドヤリングしていた記憶がありますので、その部分だけ解説させて頂きます。

入力フォームの横に文字数カウントを付けるサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>文字数カウントしたいだけのページ</title>
   <script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript" src="../js/jquery.limitCount.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#count_target").limitCount(20);
       });
   </script>
   <style type="text/css">
    <!--
        textarea {
            width: 50em;
            height: 30em;
        }
    //-->
    </style>
</head>

<body>
    <textarea id="count_target"></textarea>
</body>
</html>

jqueryと、私が作ったjquery.limitCount.jsというjsファイルを読み込んだら、あとはinputでもtextareaでも、カウントしたいフォームのid属性などを、ページ内JavaScriptでjQueryのセレクタで抽出したら、limitCountというメソッドを呼び出してもらうだけで動作します。

limitCountの引数に渡した値がカウントの上限値になります。
※上記例だと20文字制限になります。