Блог

Главная - Вопросы по программированию - выбор следующего объекта с вкладками и проблемы с постоянным нажатием клавиши

выбор следующего объекта с вкладками и проблемы с постоянным нажатием клавиши

#jquery #keydown #keyup

#jquery #нажатие клавиши #включение

Вопрос:

ОТРЕДАКТИРОВАНО В КОНЦЕ

Выбор следующего объекта с вкладками и проблемы с постоянным нажатием клавиши ..

  1. Мой объект с вкладками к следующему объекту автоматически определяется с помощью настройки tabindex = 0 для всех необходимых объектов (= li ).
  2. Когда я 1-й раз нажимаю TAB ( keydown ), существующий li объект все еще выбран. После того, как я отпущу вкладку ( keyup ), следующий объект будет выбран на основе tabindex = 0 .
  3. Пока все в порядке … когда я затем снова нажму и отпущу вкладку, будет выбран новый следующий объект.
  4. Опять же, пока все в порядке … так в чем же проблема?
  5. Проблема заключается в том, что пользователь нажимает и удерживает вкладку. Когда пользователь делает это, keyup событие никогда не регистрируется и выбирается неверный следующий объект.
  6. Поэтому, из уважения к возможности события «нажмите и удерживайте», я выполняю кодирование на основе нажатия клавиши, а не нажатия клавиши.

Вот мой предыдущий код, основанный на keyup событии, и этот код отлично работает, если нет нажатия и удержания:

 function showMenuWithTabForward() {    var $theMenu;    // = *after* TAB  // = $(document.activeElement)  var $currItem = getFocusedItem();  var $nextLI = $currItem;   // ...   $nextLI.focus();  }

А вот код, основанный на событии keyup:

 function showMenuWithTabForward() {    var $theMenu;    // = *before* TAB  var $currItem = getFocusedItem();  // = *after* TAB  var $temp = $currItem.find("li").first();  if ($temp.hasClass("#menubar gt; li") ||  $temp.hasClass("drop") ||  $temp.hasClass("daddy"))  {  $currItem = $temp;  }   var $nextLI = $currItem;   // ...   $nextLI.focus();  }

Проблема с новым кодом заключается в том, что следующий объект [ .find("li") ] пропускает правильный следующий объект.

Итак, что я делаю не так?

Боже, как бы я хотел внести изменения, необходимые для нажатия и удержания keyup … не должно быть, я думаю.

НАЧАТЬ РЕДАКТИРОВАНИЕ

Когда клавиша нажата, как я могу заставить ее действовать как keyup событие?

ЕСЛИ я смогу это сделать, я думаю, что смогу взять свой торт и съесть его тоже.

А именно, мой keyup код работает просто отлично. В настоящее keyup время доступ к обратному вызову осуществляется при возникновении события включения.

Естественно!!

Итак, как мне сделать keydown так, чтобы Событие вело себя как keyup Событие?

Эта задача, безусловно, заключается не только в размещении keyup кода в keydown обработчике.

И причина в том , что с a keydown вкладка keypress еще не появилась, поэтому браузер не выбрал следующий lt;ligt; объект. Этот выбор происходит только перед самым keyup началом .

Комментарии:

1. вы бы предпочли запретить действие «нажмите и удерживайте» и зарегистрировать только одно событие при любом нажатии клавиши? Мне это показалось бы предпочтительнее

2. Надо подумать об этом. Как бы то ни было, как мне отказаться от нажатия и удержания? Это означает, что , если я вернусь keyup , как я могу игнорировать нажатие и удержание пользователя и ничего не делать? Создание пустой функции обратного вызова для keydown ? Надо подумать об этом.

Ответ №1:

Это не то, о чем вы просили, но это одно из решений — исключить возможность сценария нажатия и удержания клавиши

 let tabOn = true $('body').on('keydown keyup', function(e) {  console.log( `attempting ${e.type}`)  var keyCode = e.keyCode || e.which;  if (keyCode == 9) {  e.preventDefault();  if (e.type === 'keyup') {  tabOn = true;  return;  } else if (e.type === 'keydown' amp;amp; !tabOn) return  else if (e.type === 'keydown') tabOn = false;  console.log('tab')  // call custom function here  } }); 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt;
Метки: