9

データベースに数字だけが含まれるように、電話入力の特定の文字を無視したい。サーバー側で（PHPを使用して）これを簡単に実行できることはわかっていますが、jsイベントをもう少しよく理解しようとしています..私の質問は次のとおりです。

基本的な入力がある場合:

var phoneInput = document.getElementById("phoneInput");

正常に動作する「onkeydown」を使用してイベントリスナーを追加できます

phoneInput.onkeydown = function(e){
  var c = String.fromCharCode(e.keyCode);
  var patt = /\d/;
  if(!patt.test(c)) return false;
};

しかし、「addEventListener」を使用して同じことをしようとすると、false を返しても何も起こらないようです

phoneInput.addEventListener("keydown",function(e){
  var c = String.fromCharCode(e.keyCode);
  var patt = /\d/;
  if(!patt.test(c)) return false;
});

理由がわかりません。被写体に照らすことができる光を事前にありがとう..

4

2 に答える 2

14

ユーザーの入力を変更したり、入力中に何かを入力できないようにしたりすることは強くお勧めしません。これは紛らわしく、ユーザー エクスペリエンスの低下につながります。

理想的には、サーバー側の検証を維持してから、次のような HTML5 機能を使用する必要があります。

<input type="number" /> Allows only numbers
<input type="text" pattern="[0-9. -]*" /> Allows numbers, spaces, periods and hyphens
<input type="text" required /> Specifies a required field

最新のブラウザーでは、フォームが送信されず、ユーザーに役立つエラー メッセージが表示されます (属性でカスタマイズできtitleます)。

ただし、一般的な参考までに、return false;必ずしもイベントをキャンセルするとは限りません。これを行うには、これを使用する必要があります。

// if you haven't already:
e = e || window.event;
// to cancel the event:
if( e.preventDefault) e.preventDefault();
return false;
于 2013-03-08T20:36:49.313 に答える
5

私が取り組んでいるプロジェクトでも同様のことをしなければなりませんでした。これが私がやった方法です。

// prevent users from typing alpha/ symbol characters on select fields
$("#modal-region").on("keydown", "#markdown, #sku", function(e) {

    var key = e.which;
    // when a keydown event occurs on the 0-9 keys the value 
    // of the "which" property is between 48 - 57 
    // therefore anything with a value greater than 57 is NOT a numeric key

    if ( key > 57) {
        e.preventDefault();

    } else if (key < 48) {

    // we don't want to disable left arrow (37), right arrow (39), delete (8) or tab (9)
    // otherwise the use cannot correct their entry or tab into the next field!

        if (key != 8 && key != 9 && key != 37 && key != 39 ) {
            e.preventDefault();
        }
    }

});
于 2014-07-24T20:57:05.610 に答える