如何阻止将数字输入到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()函数。

从文档中 ：

$ .isNumeric（）方法检查其参数是否表示数字值。 如果是这样，则返回true。 否则返回false。 参数可以是任何类型。

因此，使用此命令可以极大地清理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;
    }
});

我已经用一个有效的示例分叉并更新了您的原始提琴： https : //jsfiddle.net/GH05T/mqfntbws/6/