月曜日担当の鳥飼です。お久しぶりです。よろしくお願いします。

今日のひとネタ

iPad での閲覧を前提としたWEBページで、数値のみを入力するフィールドを使いたかったんですが、
iPad は <input type="number" /> が対応していないんですね。

なので、javascript で対応した時のネタです。

キーコードで制御しようと思った

最初はこんな感じのコードを書いていました。

$(element).on("keydown", function (event) {
    // バックスペース、削除、タブ、エスケープ、リターンの入力を許可
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Home, End, ←, → の入力を許可
        (event.keyCode >= 35 && event.keyCode <= 39)) {
        return;
    }
    else {
        // Shiftキー同時押しの数字入力はキャンセルさせる
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
            event.preventDefault();
        }
    }
});

開発マシン上のChromeで確認していたんですが、良い感じに動いているなーと思い、iPad で改めて確認したところ、(とか)とか&とかが入力できちゃう結果に。
えー(´・ω・｀) そんな。

調べてみると、こんな感じになってました。

Shift キーを押しながら数字キーを押した場合に入力される記号ですね！
ついでに、iPadだと Shift を有効にしても event.shiftKey は false のまんま。
んー…(´・ω・｀)

解決方法

• onKeyPressを使う
• iPadでは keyIdentifier がサポートされているので、keyIdentifier で判断する

折角なので（？）、keyIdentifier を使う事にしました。
例に挙げたコードは、jQueryなので、event.originalEvent.keyIdentifier って感じで参照して。

if (["U+0030", "U+0031", "U+0032", "U+0033", "U+0034", "U+0035", "U+0036", "U+0037", "U+0038", "U+0039",].indexOf(event.originalEvent.keyIdentifier) < 0) {
    event.preventDefault();
}

もう一度iPadで確認。
(とか)とか&とか、数字以外の記号は入力できず、数値のみが入力出来るようになりました。ばんざーい∩(・ω・)∩

追記

keyIdentifier は古いプロパティのようですね(´・ω・｀)
現在はWeb標準から消えているとのことで。
おとなしくkeydownイベントをkeypressに変更しました。

今日のひとネタでした(・ω・)ﾉ