javascript - 如何阻止在 contenteditable 元素中输入数字

Question

JSFiddle:https://jsfiddle.net/mqfntbws/

我有一个 contenteditable span，我想阻止用户在其中键入特殊字符或数字。问题是，我可以防止特殊字符，但它不适用于数字。有人知道我做错了什么吗？

HTML:

<span required="" contenteditable="" placeholder="First Name" aria-required="true"></span>

JS:

$('span[contenteditable]').on('keypress', function (event) {
      var regex = new RegExp("^[A-z]+$");
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key) && !((event.keyCode>=46 && event.keyCode<=58) || event.keyCode==8 || event.keyCode==9 || (event.keyCode>=37 && e.keyCode<=40))) {
         console.log(">>>");
                 event.preventDefault();
                 return false;
            }
});

Answer 1

由于您似乎正在使用 jQuery，因此您可以充分利用 API 中的 isNumeric() 函数。

来自documentation :

The $.isNumeric() method checks whether its argument represents a numeric value. If so, it returns true. Otherwise it returns false. The argument can be of any type.

因此，使用它可以极大地清理您的 if 语句。

if(!regex.test(key) || $.isNumeric(key))

给您留下以下信息:

$('span[contenteditable]').on('keypress', function (event) {

    var regex = new RegExp("^[A-z]+$");
    var key = String.fromCharCode(event.which);

    if (!regex.test(key) || $.isNumeric(key)) {

      event.preventDefault();
      return false;
    }
});

我已经用一个工作示例 fork 并更新了您的原始 fiddle :https://jsfiddle.net/GH05T/mqfntbws/6/