防止按键进入由键盘事件聚焦的元素

Question

我有一个.add-color div，可以点击它来创建一个 contenteditable span，然后专注于后者。

但是为了便于访问，我还设置了它，以便当用户在关注 .add-color div 时按下 或 时，键盘事件处理程序会触发相同的事件。不幸的是，当后者发生时， 或 字符被传递给新聚焦的跨度，这是我不想要的。

有什么方法可以防止该字符被传递到 contenteditable 范围？在我的dom.KeyActivate 方法中是否有某种方法可以清除键盘输入缓冲区（或吞下按键）？

在我的 DOM 实用程序中：

dom.KeyActivate = function(fcn) {
  return function(evt) {
    if(evt.key !== 'Enter' && evt.key !== " ") {
      return;
    }
    fcn(evt);
  }
};

在小部件定义中：

_create: function() {
  const $rangeBar = self.element.find('.rangeBar');
  self._on({
    "click .add-color": () => self._AddColor($rangeBar),
    "keypress .add-color": dom.KeyActivate( 
      () => self._AddColor($rangeBar)
    ),
  })
},

_AddColor: function($parent) {
    $(`<span contenteditable="true" type="number" name="ranges[]">?</span>`)
      .appendTo($parent).focus();

},

如果有什么不同，我正在 Chrome 上进行开发。

Answer 1

我似乎找到了解决方案：只需延迟 focus() 直到使用 setTimeout 清除调用堆栈后：

_AddColor: function($parent) {
  const $numSpan = $(`<span contenteditable="true" type="number" name="ranges[]">?</span>`)
    .appendTo($parent);
  setTimeout( ()=> {$numSpan.focus()}, 0 );
}