Question

我正在使用

document.getElementById('input-field').addEventListener('keyup', function (e) {
  if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
    event.preventDefault();
  }
});

它几乎可以工作。问题是我不能使用键箭头，退格键，删除键，ctrl + a等等。

如何将其限制为仅在特定输入中提供字符串表示的键？

Answer 1

要忽略这些键，您需要在验证输入之前添加条件。

例如，您可以创建一个包含您要忽略的所有KeyCode列表的数组，并测试键入的键是否不是其中之一。

以下是您的需求：

document.getElementById('input-field').addEventListener('keypress', function(e) {
  //An array of special Keys
  var specialKeys = [37, 38, 39, 40, 8, 13, 27, 46];
  if (specialKeys.indexOf(e.which) === -1) {
    console.log(String.fromCharCode(e.which)+ ' Key is validated!');
    if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
      event.preventDefault();
    }
  }
});

<input type="text" id="input-field" placeholder="input text here">

注意：

如评论中所述，您需要使用keypress事件代替keyup来立即验证每个输入的字符。

Answer 2

嗯，某种程度上限制你的输入范围。但我认为在这种情况下，您正在寻找一种仅识别可打印关键事件的方法。

您可以使用@TimDown在适用于keypress事件的How to detect if the pressed key will produce a character inside an <input> text-box?上提出的解决方案来实现此目的，如下面的代码所示。那么，您可以使用可打印的关键事件。

＆＃13;

    function isCharacterKeyPress(evt) {
        if (typeof evt.which == "undefined") {
            // This is IE, which only fires keypress events for printable keys
            return true;
        } else if (typeof evt.which == "number" && evt.which > 0) {
            // In other browsers except old versions of WebKit, evt.which is
            // only greater than zero if the keypress is a printable key.
            // We need to filter out backspace and ctrl/alt/meta key combinations
            return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
        }
        return false;
    }

    document.getElementById('input-field').addEventListener('keypress', function (e) {
    	if(isCharacterKeyPress(e)){
            if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) {
                e.preventDefault();
            }
        }
    });

＆＃13;

<input type="text" id="input-field" placeholder="input text here">

＆＃13;

使用javascript验证字段中的键输入

2 个答案: