Vue.jsで@keyupを使った半角英数字や数字の入力制限

2020年5月30日

今回はVue.jsで@keyupを使った半角英数字や数字の入力制限の方法についてご紹介いたします。

Vue.jsで@keyupを使った半角英数字や数字の入力制限

サンプルコードをまず書いた方が分かりやすいと思うので、まずサンプルコードを書きます。

HTML側のサンプルコードはこちらです。

このinputのclass testkeyに対して、keyupしたときにkeyUpHalfSizeRestrictionを実行させるように設定します。

一方、JS側のサンプルコードはこちらです。

methodとして二つ関数を用意しました。

keyUpHalfSizeRestriction
は半角英数字の入力制限をするための関数、

keyUpNumberRestriction
は数字の入力制限をするための関数です。

これらを実行してみると、class testKeyに対してkeyUpHalfSizeRestrictionを使った場合は半角英数字以外を入力しても自動で取り消され、keyUpNumberRestrictionを使った場合は数字以外を入力しても自動で取り消されるようになります。

つまり、結果として入力制限を設けられるわけです。

解説

なぜ前述のkeyUpHalfSizeRestriction、keyUpNumberRestrictionを使用することで入力制限を設けることができるのかというと、keyupが発火するタイミングを考えると理解できます。

keyupというのは、キーが離されたときに実行されます。
つまり、一つ半角の文字を打ったり全角の文字を複数入力すると自動的にkeyupが実行され、半角英数字や数字がreplaceされます。

キーを打つごとにコンマ数秒で処理が終わるので、結果として半角英数字や数字が入力できなくなるということになるのですね。

終わりに

今回はVue.jsで@keyupを使った半角英数字や数字の入力制限の方法についてご紹介いたしました。