2019年5月

jQuery フォームで数字のみの入力制限をかけてみた

フォームで、一部半角英数字のみ許容する項目があった場合に半角入力に切り替えるのがわずらわしいのでJSで何とかしようとしたのがきっかけ。

備忘録がてらに投稿。

やりたいこと

・全角入力のままでも半角数字 + 「.」「-」の入力が可能

・数字(0〜9) + 「.」「-」以外の文字が入力できない

用意するもの

・jQuery(1.12.4)

JS

・zenhan.js

const TARGETS = {
    '0': 0,
    '1': 1,
    '2': 2,
    '3': 3,
    '4': 4,
    '5': 5,
    '6': 6,
    '7': 7,
    '8': 8,
    '9': 9,
    'ー': '-',
};
$(function () {
    setNumOnlyInput('.number-only');
});

const setNumOnlyInput = function(selector) {
    // ブラウザ判定
    let agent = window.navigator.userAgent.toLowerCase();
    if (agent.indexOf('chrome') !== -1) {
        // Chrome
        $(selector).attr('inputmode', 'numeric');
        agentType = 1;
    } else if (agent.indexOf('edge') !== -1) {
        // Edge
        agentType = 2;
    } else if (agent.indexOf('opr') !== -1) {
        // Opera
        agentType = 3;
    }
    $(selector).on('keyup', function(){
        let val = $(this).val();
        if (agentType !== 1) {
            for (i in TARGETS) {
                // 全角数字を半角数字に変換
                reg = new RegExp(i, 'g');
                val = val.replace(reg, TARGETS[i]);
            }
        }
        // 数字とカンマ以外を除去
        val = val.replace(/[^0-9^\.^\-]/g, '');
        $(this).val(val);
        return true;
    });
}

課題

Chromeでの挙動がFireFox・IEと異なり、そこの違いを吸収しきれていない。

入力時にリアルタイムで全角 -> 半角変換を行う処理がFireFoxとIEではうまくいくものの、
Chromeで違う挙動(全角入力中の内容は保持したまま、半角変換した文字が挿入される。
入力文字が重複してしまう)だったので、全角入力中のチェック判定を行うなどの処理を入れて
試行錯誤したが正解にはたどり着けず。。

今回はChromeではフォームに「inputmode="numeric"」(全角入力から半角入力に切り替えずに
半角文字の入力に強制するフォームの属性設定)を追加することで無理やり回避。
※上記属性を付与してもフォームにフォーカスした後に全角入力切替すると結局全角入力は出来てしまう。

最後に

とりあえず前述の課題を克服していき、Chromeで自然な動きになったら改良版を投稿します!

ではまた!

2016/09/19
1