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

Question

我使用tabIndex为带有二维导航的Windows CE创建了页面。首先，我只是想使用tabIndex作为下一个焦点的参考。

因为此应用程序是用于便携式设备的，所以在手持设备上进行这样的操作非常困难，并且与简单的制表符和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);