JavaScriptでテキストボックスの文字数をリアルタイムにカウントしたい

概要

テキストボックスに入力された文字数をカウントしてリアルタイムに表示するよくあるアレを作ります。

参考サイト様

[JavaScript] リアルタイムに入力文字数を表示する – コピペで使える JavaScript逆引きリファレンス
テキストボックスで KeyDown イベントを利用すると入力したキーを含むテキストボックスの値が取得できない (テキストボックスの値が意図したものと異なる ) (JavaScript プログラミング)

成果物

See the Pen string counter by Lycheejam (@lycheejam) on CodePen.

JSでカウンターの作成

ただ、単純にinput要素を指定して入力された文字列の長さを指定された要素に挿入します。

/**
 * 文字列カウンター
 * @param {string} countTarget カウント対象のinput要素ID名
 * @param {string} resultTarget 文字列カウント結果の挿入先ID名
 */
function StringCount (countTarget, resultTarget) {
  //文字列長取得
  var len = document.getElementById(countTarget).value.length;
  //指定ID要素へ結果を挿入
  document.getElementById(resultTarget).innerText = len;
}

HTML側でイベントを設定

いろいろ省略してますが主要部分だけ記載します。（ネット環境がないのでGitHubにソースを上げれない笑）

<head>
  <script src="../static/js/string_length.js"></script>
</head>
<body>
  <h1>文字数カウントテスト</h1>
  <form action="">
    <div>
      <p>テキストボックス1</p>
      <input type="text" name="text1" id="text1" onkeyup="StringCount('text1', 'textcount1')">
      <p><span id="textcount1">0</span>文字</p>
    </div>
  </form>
</body>