テキストエリアに何文字入っているか数える

テキストエリアに文字入力を行うとリアルタイムに「いま何文字」というのがわかるアレ。

0文字

メールフォームには必要ないけれど、入力した内容がどこかに反映されるものの場合、目安となる文字数を設けたい場合があるでしょう。そんな時に使う。

新規（空のボックス）に入力する時の基本形

function ShowLength( str ) {
  document.getElementById("inputlength").innerHTML = str.length + "文字";
}

<textarea id="str" name="example" oninput="ShowLength(value);"></textarea>
<p id="inputLength">0文字</p>

発火条件に oninput を使う理由

oninput のほかに onkeyup もあって、キー入力時にカウントを実行すれば一見変わらんように見えるものの、onkeyup はコピペ時に1文字判定になって数がズレる。

その点 oninput はキーの入力ではなく文字の入力を条件としているので正確な値を取ってくれる。

編集画面でロード時に「0文字」になる問題

新規入力画面でただ文字を打った分だけ数えるなら上記コードで良い。
対して編集画面等でテキストエリアに文字が差し込まれている場合、上記コードではロード時に文字入力があるわけでもないので 0 文字と表示されてしまう。

window.onload で読み込み時に文字数を取得しておけば何とかなる。

window.onload = function() {
  var len = document.getElementById("example").value.length;
  document.getElementById("inputlength").innerText = len + "文字";
}
function ShowLength( str ) {
  document.getElementById("inputlength").innerHTML = str.length + "文字";
}

テキストエリアに文字が差し込まれる例として HTML 部分は PHP で呼び出す。

<textarea id="example" oninput="ShowLength(value);">
  <?php if ( isset($_POST['str']) ) { echo $_POST['str']; } ?>
</textarea>
<p id="inputLength">0文字</p>

これでボックス内の文字が読み込み時から正しく表示され、文字列編集をしてもリアルタイムに増減してくれるようになる。