文字数カウンター

関連サイト：

使い方：
文章を入力またはペーストします。入力欄上に文字数が表示されます。

アンケートフォームや記事投稿などでの文字制限で、何文字なのか調べたい時はよくあります。
フォームによっては丁寧に文字数を表示してくれて、上限文字数以上は入力できない様に作られている物も有りますが割と少数派です。特に難しい処理では無いのですが作るのが面倒なのでしょう。
できの悪い入力フォームでは、確認画面で「文字数オーバーしています」と言うエラーメッセージが出て、指示通り戻るとすべて消えている・・・。 そんなことを色々経験されて来た皆さんはメモ帳などで下書きを書いてから投稿している事でしょう。
いずれにしても入力フォームでカウント表示してくれない場合は、このサイトがお役にたてます。 直接入力または貼り付けで文字数を表示します。
改行はIE8は2文字として数えますが、IE9は1文字として数えます。その他、Firefox,Chrome,Safari,Operaは1文字として数えます。 おそらく本来は1文字として数えるのが正しいのでしょう。

JavaScriptは keyUp イベントで、String.length で求めています。埋め込みで書くとこんな感じです。

<textarea id="a" onkeyup="document.getElementById('b').innerHTML = document.getElementById('a').value.length;"></textarea>
<div id="b"></div>

以下の様にも書けます。

<textarea onkeyup="document.getElementById('b').innerHTML = this.value.length;"></textarea>
<div id="b"></div>

非常に短いコードで簡単ですので、実装してみてはいかがでしょうか。

全角を2,半角を1として数える場合は以下のようになるそうです。

function(str) {
  let len = 0;
  str = escape(str);
  for (let i = 0; i < str.length; i++,len++) {
    if (str.charAt(i) == '%') {
      if (str.charAt(++i) == 'u') {
        i += 3;
        len++;
      }
      i++;
    }
  }
  return len;
}

動作環境(2022-09-11時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6

2013年5月初版
2016年11月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。