【JS(jQuery)】フォームに全角文字を入力させないようにする方法

本記事は、JS(jQuery)を使って全角文字を入力させない方法を紹介します。

正しくは、全角文字を打つと強制で文字を消去する方法です。

実装時の背景

興味のない方はこちらは読み飛ばしてください。

とある開発でお客様から検索フォームに半角英数字しか入力できないようにという要望がありました。

CSSでIMEの状態を制御するime-modeがあったので、これは簡単に実装できるなと思ったのですが、ブラウザがIEとFirefoxでしか対応していない (T T)

ということで代替え案としてJS(Jquery)で対応することにしました。

理想を言えば、全角文字に切り替えが出来ないようにするのが1番ですが、JSでそこまで対応が出来ないので全角文字を消去する方法で実装しました

では実装

先ずはhtml側を載せておきます。

.html

<input id="code" type="text" name="code">

JS側を下記のように記述すればOK

.js

$(function(){
    $("#code").on("input", function(){
        if( /^[a-zA-Z0-9\-_]+$/.test(this.value) ){
            return true;
        }else {
            this.value = '';
        }
    });
 });

解説

.on("input") の部分でinputイベントでフォームの入力値をリアルタイムで取得しています。

.test(this.value)の部分で引数(入力された値) と手前の正規表現パターンにマッチすればtrueが返ります。

if文でもしtrueならそのままtrueを返して、もしfalseなら$this.value(入力された値)を空（文字を消去）にします。

これでオッケーです。

あと少し手を加えるとすると、初期の入力設定を半角文字になるようにtypeをemailにしましょう。

またemailだとhtmlのチェック機能が有効になるのでformにno validateを入れます。

記述は下記の通りです。

.html

<form method="post" action="example.cgi" novalidate>
<input  id="code" type=”email" name="code" > 
</form>

+α

フォームが複数ある時は関数にして簡略化しましょう！

    $("#code").on("input", function(){
        if ( ! removeUppercase(this.value) ){
            return this.value = '';
        }
    });

    function removeUppercase(value){
        if( /^[a-zA-Z0-9\-_]+$/.test(value) ){
            return true;
        }else {
            this.value = '';
            return false;
        }
    }