Question

我在日期输入上捕获Tab Keydown事件时遇到问题。假设我有一个包含五个输入的表单，第一个和最后一个是日期输入（这里的html是供参考的......我知道它缺少ID，tabindex等）：

<form id="heyImAForm">
    <input type="date" id="in1" />
    <input type="text" id="notimportant2" />
    <input type="text" id="notimportant3" />
    <input type="text" id="notimportant4" />
    <input type="date" id="in5" />
</div>

我想做的是当用户Shift-Tabs退出第一个输入时，以及当用户选中最后一个输入时调用方法。

问题是，我想保留日期输入的本机Tab键行为，即在天/月/年之间移动。所以，像这样：

$('#in1').keydown(function(e) {
    if (e.which == 9 && e.shiftKey) {
        doAThing();
    }
});
$('#in5').keydown(function(e) {
    if (e.which == 9) {
        doADifferentThing();
    }
});

....“工作”，但有效地杀死了原生的Tab键行为。所以，长话短说，如果焦点偏离日期输入，有没有办法只触发Tab键事件，而不是在日/月/年之间移动？

Answer 1

在尝试了一些事情后，我认为最好的解决方案就是你所看到的here，但请继续阅读以全面了解我在做什么。我们正在设置focusout当用户点击第一个元素上的shift-tab或者在第二个元素上没有tab时移动。如果用户点击了其他内容，我们必须取消绑定此操作，因此如果他们切换选项卡我们不会触发操作，但保留在元素内然后移出它。所以尝试这样的事情：

$('#in1').keydown(function(e) {
  if (e.which == 9 && e.shiftKey) {
    $(document).mousedown(function(){
      $('#in1').unbind('focusout');
      $(document).unbind('mousedown');
    });
    $('#in1').focusout(function(){
      doAThing();
    });
  } else {
    $('#in1').unbind('focusout');
    $(document).unbind('mousedown');
  }
});
$('#in5').keydown(function(e) {
  if (e.which == 9 && !e.shiftKey) {
    $(document).mousedown(function(){
      $('#in5').unbind('focusout');
      $(document).unbind('mousedown');
    });
    $('#in5').focusout(function(){
      doADifferentThing();
    });
  } else {
    $('#in5').unbind('focusout');
    $(document).unbind('mousedown');
  }
});

当点击shift-tab（in1）或tab-without-shift（in5）时，您可以看到我们还设置了整个文档的mousedown。在mousedown我们解除了focusout的绑定，因此如果焦点因鼠标点击而离开，我们就不会触发doAThing()。我们还解除了mousedown文档的绑定，因为您不希望每次用户在对这些元素进行Tab键（in5）或shift-tabbing（in1）后单击时都会触发它。

您可能也有兴趣了解我在this fiddle上所做的事情。这不是最佳解决方案，因为在许多情况下，setTimeout会导致一些问题和不良影响。

此外，在您提供的代码中，结束标记应为</form>而不是</div>。

HTML5日期输入的Tab Keydown事件

1 个答案: