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

1398 ワード
WordPress jQuery form JavaScript JavaScript テキストリンク

フォームに数字以外を入力したくない時ってありますよね？
クライアントからの依頼で、これに対応しようとして、散々苦労したことがありましたので、こちらにメモしておこうと思います。

普通に考えると…
0123456789だけを入力できるようにすればいい！

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

概要

●input type属性はtelにする

これにより、スマートフォンでは数字以外が入力できなくなります。
（ただしコピペされたら素通り）

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

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

input type属性をnumberにしない理由　その１
number属性だと、スマートフォンではなんでも入力できてしまいます。

input type属性をnumberにしない理由　その２
パソコンで、↑、↓を押してしまうと値が変わってしまいます。

jQueryで全角入力を制御

下記のようなコードを入力します。
#formfieldidは環境に合わせて書き換えてください。
記載する場所ですが、プラグイン「Simple Custom CSS and JS」　がオススメです。

$(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;
  }
});

$(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,'');
});