【javascript】inputの入力フォームに何文字入力されているか調べる方法

今回はinputなどの入力フォームに何文字入力がされているか調べる方法について紹介していきたいと思います。

入力フォームの制御や判定などはよく使う処理なので基本を覚えておくとさまざまな場面で役にたつと思います。

inputの入力フォームに何文字入力されているか調べる

html

<label for="number">文字を入力してください。</label><br>
<input type="text" id="number"><br>
<div>いま<span id="re">0</span>文字入力されています。</div>

javascript

var input = document.getElementById("number");
var re = document.getElementById("re");
input.addEventListener("keyup", function() {
	re.textContent = input.value.length;
});

解説

inputタグとspanタグをgetElementByIdで取得します。

inputに文字が入力されるとinputに入力されている文字数を取得してspanタグの文字を書きえます。

たとえば1文字入力したら「いま1文字入力されています。」というテキストに変わります。

サンプル

まとめ

WebサイトやWebページを作るさいには必ずといっていいほど入力フォームがでてきます。

ぜひ覚えておきましょう。