jQueryを利用して文字数のカウントを取る!

jQuery

仕事でちょっと組み上げたので自分のためにメモです。
テキストエリアの文字数を取得し(改行も)表示する案件がありました。

 

データベースの登録の際にVARCHAR(128)に128文字(改行が複数行あった)ぴったりを入力したところエラーとなり、簡易ですがJavascript側でもチェックを入れることにしました。

 

視覚的に確認できる事からユーザーにも分り易く最大文字数を伝える事が可能となります。

 

では、実際のコードとなります。
まずは下記のコードを記述します。

<script>
String.prototype.count = function() {
  return this.length + ((this.length > 0) ? this.length - this.replace(/\n/g, "").length + 1 : 0);
}
</script>

 

まだ、しっかりとテストしていないので不安な部分もありますが改行コードの場合には、1文字としてではなく2文字として返すようにしています。

 

使い方は、下記のコードのようになります。

<html>
  <head>
    <meta charset="utf-8">
    <link href="/css/select2.css" rel="stylesheet"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
    <script>
      String.prototype.count = function() {
        return this.length + ((this.length > 0) ? this.length - this.replace(/\n/g, "").length + 1 : 0);
      }
    </script>
  </head>
  <body>
    <textarea id="sample"></textarea>
    <p id="count">0</p>
  </body>
  <script>
    $(function() {
      $('#sample').on('change keyup', function() {
        $('#count').text($(this).val().count());
      });
    });
  </script>
</html>

 

簡易なものですが、テキストエリアに添えてあげることで利便性は向上するのではないかと思われます。

コメント

タイトルとURLをコピーしました