javascript - 有没有办法防止 OSX 的长按字符菜单插入替代字符？

Question

我正在使用 JavaScript 开发一个结构化输入类，该类处理按键/按键事件，以确保在特定字段中只允许特定类型的输入(例如，不能将数字插入到纯字母字段中)。我的结构化输入会在无效字符进入输入字段之前将其丢弃。

我最近发现，在 OSX 上，如果你短按某些键，你会看到一个弹出菜单，其中包含该键的备用选项(比如长按 U 键为您提供诸如 û、ü 等选项)。如果您从弹出菜单中选择这些选项之一，并且您专注于我的结构化输入类正在监视的输入字段，则无论该字符是否有效，该字符都会被插入到该字段中。

据我所知，发生这种情况是因为操作系统只是简单地添加字符，而不是触发您希望在键入文本时触发的任何正常 JavaScript 事件(keydown、keypress , keyup).但是，将触发 Input 和 Change 事件。我考虑过监听输入事件来去除这些非标准字符，但是由于输入的字符不包含在输入事件中(没有e.which，e.keycode, e.charCode), 我需要对我试图避免的输入字段的内容做很多额外的分析。

我的问题是，是否有任何我不知道的事件被触发，我可以使用这些事件来准确捕获 Mac OSX 长按字符弹出窗口？还是我运气不好？

编辑:我添加了一个示例，说明我当前如何检查键盘事件以供引用。

构造函数中的事件监听器:

    // Point all keyboard related events to the handleKeyEvents() method, which knows how to
    // deal with key syphoning and event propogation.
    self.element.on('keydown.mask keypress.mask ' + self.env.pasteEvent, null, function(e) {
      self.handleKeyEvents(self, e);
    });

以及实际的 key 处理方法:

// The catch-all event for handling keyboard events within this input field. Grabs information about the keys
// being pressed, event type, matching pattern characters, and determines what to do with them.
  handleKeyEvents: function(self, e) {
    var evt = e || window.event,
      eventType = evt.originalEvent.type,
      key = e.which,
      typedChar = String.fromCharCode(key);

    // set the original value if it doesn't exist.
    if (!self.initValue) {
      self.initValue = self.element.val();
    }

    if (eventType === 'keydown') {
      // backspace || delete
      if (key === 8 || key === 46 || (self.env.iPhone && key === 127)) {
        self.handleBackspace(evt);
      } else if (key === 13) { // enter
        self.element.trigger('blur', evt);
      } else if (key === 27) { // escape
        self.handleEscape(evt);
      } else if (36 < key && key < 41) { // arrow keys (in Firefox)
        return;
      } else if (evt.shiftKey && 36 < key && key < 41) { // arrow keys AND shift key (for moving the cursor)
        return;
      }
    }

    if (eventType === 'keypress') {
      // Ignore all of these keys or combinations containing these keys
      if (evt.ctrlKey || evt.altKey || evt.metaKey || key < 32) {
        return;
      // Need to additionally check for arrow key combinations here because some browsers
      // Will fire keydown and keypress events for arrow keys.
      } else if (evt.shiftKey && 36 < key && key < 41 && typedChar !== '(') {
        return;
      } else if ((36 < key && key < 41) && typedChar !== '\'' && typedChar !== '(')  {
        // '(' is keycode 40 on some browsers
        // '/' is keycode 39 on some browsers
        return;
      }
      if (self.mode === 'number') {
        self.processNumberMask(typedChar, evt);
      } else {
        self.processMask(typedChar, evt);
      }
    }

    if (eventType === 'paste') {
      self.handlePaste(evt);
    }

Answer 1

我建议在实际提交内容之前对字段的有效性进行额外检查。这样非 OSX 用户将获得预期的体验，但如果发生这种长按行为，您仍然可以在提交之前捕获它。

另一种选择是使用 setInterval

定期检查字段的内容

我知道这听起来像是在重复逻辑，但如果没有一致的输入方法，就不可能编写出通用的解决方案。