Question

我创建了以下函数，我将其应用于各种输入，以限制用户可以在其中输入的内容。虽然此功能在 Microsoft Edge 上运行良好，但我面临来自 Mozilla Firefox 的严重阻力，似乎不接受组合 shift +←， shift +→， ctrl + A 以及单个键，例如 shift ，退格，删除等

我修复了第二个问题，并设法使 Firefox 使用下面显示的 isAuxiliaryKey 变量来接受各个键，但是我无法找到让它接受组合的方法。似乎Firefox的 keypress 功能类似 keydown ......

我真的想解决这个问题，因为这些组合是选择文本的一些非常常见的方法。有没有办法解决故障？

代码：

/* ----- JavaScript -----  */
function restrict (el, acceptedChars, maxLength) {
  el.onkeypress = function(e) {
    var
      key = String.fromCharCode(e.which),
      isAccepted = isAuxiliaryKey || ((acceptedChars instanceof RegExp) ?
          acceptedChars.test(key) : !!~acceptedChars.indexOf(key)),
      isMaxOrLess = maxLength > el.value.length,
      isAuxiliaryKey =
          (!!~[8, 9, 13, 16, 17, 18, 35, 36, 37, 38, 39, 40, 46].indexOf(e.which)),
      hasActiveSelection = 
          el === document.activeElement && el.selectionStart !== el.selectionEnd;

    return (isAccepted && (isMaxOrLess || hasActiveSelection)) || isAuxiliaryKey;
  }
}

restrict(document.getElementById("text"), /[a-z]/, 4);

<!----- HTML ----->
<input id="text" type="text" />

Answer 1

从没有人回答的事实来看，我认为这是一个问题，并且可能会在未来引起更多人的关注。经过一些反复试验，我终于想出了两个可以同样解决这个问题的解决方案：

▶1 ^st选项：

解决此问题的一种方法是使用 keydown 事件而不是 keypress ，因为在 {{1 会有共享相同 keypress 的字符。例如，对于 keyCode 事件，删除和 _• 都会给出 {{ 1}} 即可。因此，如果我们允许按删除，也允许 _• 。

要解决此问题，我们可以使用：

keypress

然后，我们可以在以下行中将 e.which = 46 更改为 var a = element.onkeydown = function(e) { return e; } ：

<强>代码：

＆＃13;

isAuxiliaryKey = (!!~[8, 9, 13, 16, 17, 18, 35, 36, 37, 38, 39, 40, 46].indexOf(a.which))

＆＃13;

▶2 ^nd选项：

我们也可以使用 /* ----- JavaScript ----- */ function restrict (el, acceptedChars, maxLength) { var a = el.onkeypress = function(e) { return e; } el.onkeypress = function(e) { var key = String.fromCharCode(e.which), isAccepted = isAuxiliaryKey || ((acceptedChars instanceof RegExp) ? acceptedChars.test(key) : !!~acceptedChars.indexOf(key)), isMaxOrLess = maxLength > el.value.length, isAuxiliaryKey = (!!~[8, 9, 13, 16, 17, 18, 35, 36, 37, 38, 39, 40, 46].indexOf(a.which)), hasActiveSelection = el === document.activeElement && el.selectionStart !== el.selectionEnd; return (isAccepted && (isMaxOrLess || hasActiveSelection)) || isAuxiliaryKey; } } restrict(document.getElementById("text"), /[a-z]/, 4); ，而不是使用  <input id="text" type="text" /> 事件。这解决了共享相同 keydown 的键的问题，因为即使我们上一个示例中的两个键，删除和 _• ，生成 String.fromCharCode(e.which) === "" ，它们有以下区别：

keyCode

因此，考虑到上述因素，通过将 e.which = 46 变量更改为以下内容，也可以缓解此问题：

DELETE -> String.fromCharCode(46) = ""
.      -> String.fromCharCode(46) = "."

<强>代码：

＆＃13;

isAuxiliaryKey

＆＃13;

isAuxiliaryKey =
    (!!~[8, 9, 13, 16, 17, 18, 35, 36, 37, 38, 39, 40, 46].indexOf(e.which)) && key === ""

＆＃13;

无法获得适用于Firefox的键盘组合

1 个答案: