文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

JavaScriptで作るkeyupを使用したinputの文字数バリデートの作成方法

javascript

こんにちはYsです。
今日はJavaScriptで文字数のバリデートを作成する方法を書いていこうと思います。
完成品は以下のようなやつです。

文字数が一定数を超えたら、右側に赤文字でエラーを表示して指定文字数の入力に誘導するっていう初歩的なものの作成方法です。

今回は用途別に以下の3通りで作成していこうと思います。

  • JavaScript(フレームワークなし)
  • jQuery
  • Vue.js

まずは大枠のHTMLの準備

まずは大枠のHTMLのみを用意します。
上の3通りで変えるのは面倒なので統一したHTMLを用意します。

✅想定設計
inputタグに20文字以上入力あったら文字入力カウントの文字色を赤色に変える

Vue.jsをご存知の方はおそらく分かりますがJavaScriptやjQueryとは書き方が大分異なるので、Vue.js用のHTMLは後述します。

まずは普通のJavaScriptとjQueryで使用できるHTMLを用意します。

<div id="app">
  <input type="text" id="js-input-text">
  <div class="count">
    <span id="js-count-text">0</span> / 20
  </div>
</div>

spanタグで囲っている数字の部分をJavaScriptで動的に変えていきます。

input typeをCSSでレイアウトを整えていく

機能面が主な記事なのでデザインを書かなくても良いかなと思いましたが一応レイアウトを整えていきます。デザインは重視ではないので横着します。

.errorの部分がエラーのためのCSSなのでこれだけ追加でもOKです。

input[type="text"] {
  width: 220px;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 4px;
  font-size: 15px;
}

.count {
  margin-top: 10px;
  color: #828685;
  font-size: 13px;
}

.error {
  color: red;
}

JavaScriptで動的に値を取得する

JavaScriptでinput要素の値を動的に取得するにはkeyupというeventlistenerを使用します。
これを使用すると、キーボードの入力をイベントの起因としてくれます。

JavaScriptのeventlistenerって何があるんじゃい!!という方は以下の記事をどうぞ。
≫ addEventListener type一覧と各ブラウザ対応

基本的にはJavaScriptでDOM要素をいじるときは、idセレクタを使用するのが通例らしい(フロントエンジニアからの参考)ので当記事もそのやり方で行います。

  1. 必要な要素を取得する
  2. input要素にkeyupのイベントを付与する
  3. 入力された文字数を、文字カウントテキストに反映
  4. 入力された文字数が指定数を超えた場合、エラー用のスタイルを付与

JavaScriptでkeyupを使用した処理を書いていく

jQueryなどを使用しないで書く完全に生のJavaScriptです。
記述は多くなりますが、これが一番早いですね。

// ------- ①の部分 -------
var text = document.getElementById('js-input-text');
var countText = document.getElementById('js-count-text');

// ------- ②の部分 -------
text.addEventListener('keyup', () => {
	// ------- ③の部分 -------
	countText.textContent = text.value.length;

	// ------- ④の部分 -------
	countText.classList.remove('error');

	if (countText.textContent > 20) {
		countText.classList.add('error');
	}
});

生のJavaScriptだとこれで完成です。
エラーの感じを強くするためにcssでinput要素のbackground-colorを赤とかにしても良いですね。

jQueryでkeyupを使用した処理を書いていく

上記は完全に生のJavaScriptで書きましたが、今度はニーズに合わせてjQueryを使用したJavaScriptで書いていこうと思います。

処理の流れは上記と全く同じにします。

// ------- ①の部分 -------
var $text = $('#js-input-text');
var $countText = $('#js-count-text');

// ------- ②の部分 -------
$text.on('keyup', () => {
	// ------- ③の部分 -------
	$countText.text($text.val().length);

	// ------- ④の部分 -------
	$countText.removeClass('error');
	if ($countText.text() > 20) {
		$countText.addClass('error');
	}
});

jQuery verで書きました。
記述量が生のJavaScriptに比べて少ないので開発者目線では楽ですね。

ただ、やはりほんの少しですがjQueryは重いので同じ処理内容でもラグが発生します。ここはお好みですね。

Vue.jsでkeyupを使用した処理を書いていく

上記、2つは生のJavaScriptとjQueryを使用して書きましたが、最近はjQuery < Vue.jsの構図が強くなってきているのでニーズに合わせて、Vue.jsバージョンでも書いていこうと思います。

Vue.jsではHTML要素に特殊な記述が必要なので大枠のHTMLを少し修正します。

<div id="app">
  <input type="text" v-on:keyup="keyup" v-model="inputText">
  <div class="count">
    <span v-text="countText" v-bind:class="{error: isError}"></span> / 20
  </div>
</div>

上記で使用したidセレクタは削除しました。Vue.jsではデータバインディングと言われる特殊な記述が可能なのでidセレクタがいらないです。

とりあえずはこれで大枠のHTMLの修正は完了です。次に実際にVue.jsで記述を書いていきます。

※Vue.jsを使用する際には本番環境用と開発用環境で分ける

HTML側でVue.jsを読み込む際にはCDN形式で読み込むのが一般的ですが、その際には注意が必要です。

  • 本番環境の読み込み

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  • 開発環境の読み込み

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

あくまで自分ローカルで開発をするときは後者の方を読み込みましょう!

ではVue.jsを書いていきます。

var app = new Vue({
	// ------- ①の部分 -------
	el: '#app',
	data: {
		countText: 0,
		inputText: '',
		isError: false
	},
	// ------- ②の部分 -------
	methods: {
		keyup: function() {

			// ------- ③の部分 -------
			this.countText = this.inputText.length;

			// ------- ④の部分 -------
			this.isError = false;
			if (this.inputText.length > 20) {
				this.isError = true;
			}
		}
	}
});

これで完成です。
書き方は違えど、処理内容や挙動は同じになります。

やはり速度的にラグがほぼないのは生のJavaScriptですね。強いけどやりやすい部分と、やりにくい部分がありますね。

まとめ

今回はVue.jsの勉強を兼ねて3パターンで同じ処理内容を書きました。
JavaScript関連の発信は今後初歩的なものから含めて続けていきます。

\記事のシェアをお願いします!/