Question

我想忽略手机输入中的某些字符，以便数据库只有数字。我知道我可以在服务器端（使用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;
});

我只是不明白为什么。提前感谢任何可以照亮主题的灯光。

Answer 1

我强烈建议不要更改用户的输入，否则会阻止他们在进行操作时输入内容。它令人困惑，导致糟糕的用户体验。

理想情况下，您应该保留服务器端验证，然后使用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;

Answer 2

我必须为我正在进行的项目做类似的事情。这就是我做到的。

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

});

按键时忽略输入字符

2 个答案: