【Javascript超初級】テキストボックスに入力された文字数を表示させる方法

こんにちは！ろんじぇです。

本日はJQueryでformタグ内のテキストボックスに入力された文字数
を表示させる方法をシェアします。

今回やる事

このフォームに何かしらの文字を入れると
下の「０文字」が「１文字」「２文字」...と文字数通りに
リアルタイムで反映されていくようにします。

コード

HTML

<form>
  フォーム：<input type="text" name="name" id="input-text">
</form>
<div id="char-count">
  0文字
</div>

JavaScript

$("#input-text").on("keyup", function(){
  var charNum = String($(this).val().length);
$("#char-count").text(charNum + "文字");
  });

方法

３ステップで解説します。

ステップ１

Id名はinput-textを指定して
イベントタイプはKeyupを使用します。

keyupはキーを全てのキー操作で発生します。

ちなみに.keyup(function( ){......
という風に.onは省略可能です。

ステップ２

変数charNumに文字数を代入します。（Stringメソッドを利用）

ここで、$(this)というのが出てくるのですが
これは繰り返し処理やイベントが発生した要素を取得することができます。
つまり$(this)は$(#input-text)の事を指します。

参考記事はこちらです。 www.sejuku.net

そしてval( )は何かと言うと
input-textのvalue属性の事を指していて、( )の中身がフォーム入力された部分です。

フォームに（１２３４）と入力されれば、val(１,２,３,４)ということになります。
それをlengthメソッドで何文字入っているのか取り出します。

参考記事はこちらです。 www.sejuku.net

ステップ３

最後は $("#char-count").text(先程の変数charNum + "文字数") とすることで
char-count idのテキスト部分（０文字）を書き換えることが出来ます。

以上、簡単ですがまとめておきました。
ではまた次回！