在模态中捕获选项卡和Shift选项卡

时间:2015-02-27 11:03:35

标签: javascript

我目前正试图捕捉标签并将+标签焦点移动到对话框/模态中。我目前有以下内容:

  var firstAnchor = document.getElementById("first"),
      lastAnchor = document.getElementById("last");

  function keydownHandler(f) {
    var evt = f || window.event;
    var keyCode = evt.which || evt.keyCode;
    if(keyCode === 9) { // TAB pressed
      if(evt.preventDefault) evt.preventDefault();
      else evt.returnValue = false;
      firstAnchor.focus();
    }
  }

  if(lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
  else if(lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);

并且它适用于制表符,但是还需要捕捉shift + tab?

1 个答案:

答案 0 :(得分:1)

通过添加一个绑定到组中第一个元素的函数来解决:

var firstAnchor = document.getElementById("first"),
      lastAnchor = document.getElementById("last");

  function keydownHandler(f) {
    var evt = f || window.event;
    var keyCode = evt.which || evt.keyCode;
    if(keyCode === 9) { // TAB pressed
      if(evt.preventDefault) evt.preventDefault();
      else evt.returnValue = false;
      firstAnchor.focus();
    }
  }

  function keydownHandlerFirst(f) {
    var evt = f || window.event;
    var keyCode = evt.which || evt.keyCode;
    if(keyCode === 9 && evt.shiftKey) { // TAB+SHIFT pressed
      if(evt.preventDefault) evt.preventDefault();
      else evt.returnValue = false;
      lastAnchor.focus();
    }
  }

  if(lastAnchor.addEventListener) lastAnchor.addEventListener('keydown', keydownHandler, false);
  else if(lastAnchor.attachEvent) lastAnchor.attachEvent('onkeydown', keydownHandler);
  if(firstAnchor.addEventListener) firstAnchor.addEventListener('keydown', keydownHandlerLast, false);
  else if(firstAnchor.attachEvent) firstAnchor.attachEvent('onkeydown', keydownHandlerLast);

我被提醒为什么我使用框架...你能相信我们曾经写过这样的所有javascript吗?!