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

Question

我有一个.add-colordiv 可以单击以创建一个 contenteditable 跨度，然后专注于后者。

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

有什么方法可以防止该字符被传递到 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 上进行开发。

标签： javascriptjqueryjquery-uikeyboard-events

Answer 1

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

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