読者です 読者をやめる 読者になる 読者になる

White Box技術部

WEB開発のあれこれ(と何か)

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

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

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

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

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属性などを、 ページ内JavaScriptjQueryセレクタで抽出したら、limitCountというメソッドを呼び出してもらうだけで動作します。

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

画面サンプル

動作している画面はこんな感じになります。

f:id:seri_wb:20150329020343p:plain

改行も1文字としてカウントされ、文字数がオーバーするとマイナス表記で文字が赤くなります。

f:id:seri_wb:20150329020515p:plain

と、別段大したことではないのですが、この機能を利用するのに、実質

JavaScriptに$("#count_target").limitCount(20);の1行を書くだけ」

というのが個人的に気に入っています。

こういうIFがいつも思いつけるよう、精進していきたいところです。