在 javascript 或 JQuery 中触发或返回 shift+tab

Question

我为 Windows CE 制作了一个页面，使用 tabIndex 进行二维导航。起初我只是想用tabIndex作为下一个焦点的参考。

因为此应用程序适用于便携式设备，所以与简单的 Tab 和 Shift+Tab 相比，这样做对手持设备的要求非常高，并且非常耗时。

我有一个函数来处理向上箭头和向下箭头的 onkeydown， 对于我的向下箭头，代码很简单

if(specialMove == 0){ 所做的只是检查选项卡是否离开页面。

event.keyCode=9; return;}

问题是我的向上箭头，我希望它返回 SHIFT+TAB 来向上导航，我找到了这个 jQuery 代码片段，但我在使其工作时遇到问题。

if(specialMove == 0){
    $('body').trigger(JQuery.Event('keydown', {keyCode:9, shiftKey: true}));
    return;
}

Answer 1

在这种情况下，触发器仅调用主体上定义的事件处理程序。它不会将键代码发送到浏览器。请参阅：http://api.jquery.com/trigger/。简而言之，它只执行 jQuery 知道的在发生 keydown 事件时执行的代码。它“模拟”按键事件。

据我所知，向浏览器发送关键事件是不可能的，因为这会带来一些严重的安全风险。您必须在 Javascript 中实现选择下一个和上一个元素。

编辑：
您可以尝试类似的方法：

$(function() {
  var navigationElements = $('[tabIndex]').sort(function(a,b) {
    return $(a).attr('tabindex') - $(b).attr('tabindex');
  });

  // We don't know if the users presses the up or down button first
  // so we initialize as null and let the event handle the first element
  var currentIndex = null;

  // On event:
  if (currentIndex != null && currentIndex < navigationElements.length - 1) {
    navigationElements[++currentIndex].focus();
  } else {
    currentIndex = 0;
    navigationElements[currentIndex].focus();
  }

  // and:
  if (currentIndex != null && currentIndex > 0) {
    navigationElements[--currentIndex].focus();
  } else {
    currentIndex = navigationElements.length - 1;
    navigationElements[currentIndex].focus();
  }
});

这是未经测试、未优化的代码，因此可能有更好的解决方案，但即使在速度较慢的浏览器上，它也会运行得相当快。它不考虑不经过您的事件的焦点更改，因此您必须添加 onfocus 事件以将 currentIndex 设置为最后选择的元素由用户。

Answer 2

const keyupEvent = new Event('KeyboardEvent');
keyupEvent.initEvent('keyup');
Object.defineProperties(keyupEvent, {
  keyCode: {
    value: 9
  },
  shiftKey: {
    value: true
  }
});

...

element.dispatch(keyupEvent);