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

Question

我使用 tabIndex 为带有二维导航的 Windows CE 制作了一个页面。一开始我只是想用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

在这种情况下，Trigger 只调用定义在 body 上的事件处理程序。它不会将密钥代码发送到浏览器。见：http://api.jquery.com/trigger/。简而言之，它只执行 jQuery 知道在 keydown 事件的情况下会执行的代码。它“模拟”了一个 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);