概要
テキストボックスに入力された文字数をカウントしてリアルタイムに表示するよくあるアレを作ります。
目次
参考サイト様
- [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>onkeyup=""でキーを押下し離した時にイベントが発生するように指定します。
そして、<span id="textcount1">0</span>にカウントされた文字数が挿入されます。
onkeyupイベントについて
onkeyupイベントはキーを押しっぱなしで入力されるとキーを離すまでカウントされない。
onkeydownについては文字が入力されるより先に関数が走ってしまうのでカウントがリアルタイムで発生しないっぽいです。
雑感
やっと一人暮らしのタスクがルーチン化できてきて勉強する余裕が生まれ始めた。