Предотвратить нажатие клавиши для перехода к элементу, сфокусированному на событии клавиатуры - PullRequest
Новая
       150

Предотвратить нажатие клавиши для перехода к элементу, сфокусированному на событии клавиатуры

0 голосов
/ 06 августа 2020

У меня есть .add-color div, по которому можно щелкнуть, чтобы создать контентный диапазон, а затем сфокусироваться на последнем.

Но для удобства я также настроил его так, чтобы обработчик событий клавиатуры запускает то же событие, когда пользователь нажимает или , когда фокусируется на .add-color div. К сожалению, когда происходит последнее, символ или передается во вновь сфокусированный диапазон, что мне не нужно.

Есть ли способ предотвратить передачу этого символа в контентный диапазон ? Может быть, есть способ очистить буфер ввода с клавиатуры (или проглотить нажатие клавиши) в моем методе 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.

1 Ответ

0 голосов
/ 07 августа 2020

Кажется, я нашел решение: просто отложите focus() до тех пор, пока стек вызовов не очистится, используя setTimeout: 

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