Wordpressの特定のフォームに数字以外を入力させないようにする方法

フォームに数字以外を入力したくない時ってありますよね？

クライアントからの依頼で、これに対応しようとして、散々苦労したことがありましたので、こちらにメモしておこうと思います。

普通に考えると…

0123456789だけを入力できるようにすればいい！

ってなるんですが、実はこれだけでは、「全角入力」のキーはすべて素通りで入力できてしまいます。

概要

●input type属性はtelにする

これにより、スマートフォンでは数字以外が入力できなくなります。

（ただしコピペされたら素通り）

●jQueryで全角入力を制御する。

これにより、PCで半角数字以外が入力された時に弾きます。

input type属性をnumberにしない理由　その１

number属性だと、スマートフォンではなんでも入力できてしまいます。

input type属性をnumberにしない理由　その２

パソコンで、↑、↓を押してしまうと値が変わってしまいます。

jQueryで全角入力を制御

下記のようなコードを入力します。

記載する場所ですが、プラグイン「Simple Custom CSS and JS」　がオススメです。インストールしたら新規JSを追加、footer要素内にチェックを入れるのを忘れずに。

function keyCheck(e){
    let k = e.keyCode;
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46 || k ===13)){
　　　　    return false;
  }
}

function keyReplace(e){
        this.value = this.value.replace(/[^0-9]+/i,'');
}

$(document).on('keydown', '#numberonly',keyCheck);
$(document).on('keyup blur', '#numberonly',keyReplace);

#numberonlyは環境に合わせて書き換えてください。また、こちらはWordPressでの書き方になっています。ご注意ください。

コードの解説

大抵のフォームはプラグインで実装すると思いますが、プラグインで実装したフォームは、ページを読み込んだ瞬間にはDOMが生成されません。
なので、documentにイベントを仕込んでおいて、イベントが発生した時にセレクターを探しにいくようにしないと殆どのプラグインでは動かないと思います。

$(document).on('keydown', '#formfieldid', function(e){
  let k = e.keyCode;
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46 || k ===13)){
    return false;
  }
});

最初の部分で、半角の入力の制御を行い、0〜9と矢印キーとエンターキーを入力許可し、他は許可しない（falseを返す）ようになっています。

$(document).on("keyup","#formfieldid", function(e){
  this.value = this.value.replace(/[^0-9]+/i,'');
});

$(document).on("blur","#formfieldid", function(e){
  this.value = this.value.replace(/[^0-9]+/i,'');
});

keydownイベントは、全角入力をすべて素通りします。後の部分で、キーを離した時（keyup）と、フォーカスが外れた時（blur）に0〜9以外の文字を
空白に置換するようにしています。

いくつかのフォームフィールドをまとめて処理したかったので、これらを一つの関数にまとめます。

function keyCheck(e){
    let k = e.keyCode;
  let str = String.fromCharCode(k);
  if(!(str.match(/[0-9]/) || (37 <= k && k <= 40) || k === 8 || k === 46 || k ===13)){
　　　　    return false;
  }
}

function keyReplace(e){
        this.value = this.value.replace(/[^0-9]+/i,'');
}

$(document).on('keydown', '#numberonly',keyCheck);
$(document).on('keyup blur', '#numberonly',keyReplace);

参考元

https://pisuke-code.com/jquery-input-number-only/