あとらすの備忘録

チラ裏のメモ帳 | C#とかVue.jsとかAWSとか興味のあることちまちまやってます。

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>

onkeyup=""でキーを押下し離した時にイベントが発生するように指定します。
そして、<span id="textcount1">0</span>にカウントされた文字数が挿入されます。

onkeyupイベントについて

onkeyupイベントはキーを押しっぱなしで入力されるとキーを離すまでカウントされない。
onkeydownについては文字が入力されるより先に関数が走ってしまうのでカウントがリアルタイムで発生しないっぽいです。

雑感

やっと一人暮らしのタスクがルーチン化できてきて勉強する余裕が生まれ始めた。