javascript - 如何控制 javascript 或 jquery 中的 Tab 键行为？

Question

假设我们有两个文本框 textbox1 和 textbox2

我将光标放在 textbox1 内，然后按 Tab 键。光标移动到文本框2。如何控制 javascript 或 jQuery 中的 Tab 键行为。我想做的是 textbox1 抛出焦点移出事件的那一刻，我想检查某些条件(业务条件) 并基于它我想允许默认值Tab 键行为或将光标指向我想要的位置。

有人可以指导我如何做到这一点吗？

我假设的是以下事件流程 :在 textbox1-> textbox1 focusout event-> textbox2 中按下 Tab 键。基本上我想要在 focusout 事件之后和 textbox2 选择之前进行一些控制。我之前使用过 jQuery focusout 事件，但它的作用是，它触发 focusout 事件并选择 textbox2 ，达不到我想要在 textbox2 之前检查某些条件的目的已选择

Answer 1

首先您需要找到 key 代码 tab

$( "#findKey" ).on( "keydown", function( event ) {
  $( "#log" ).html( event.type + ": " +  event.which );
});

<input id="findKey" value="type something">
<div id="log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

然后你可以设置点击功能然后设置条件

$(document).on('keydown', function(event){
  if( event.which == 9){
     alert("now you are clicked tab");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

或者您可能需要更改 Tab 键顺序，这就是您需要的，您可以使用 tabindex属性(property)

HTML 表单中的所有元素(隐藏元素除外)都是表单 Tab 键顺序的一部分。当用户按下 Tab 键时，浏览器会将输入焦点从一个元素转移到另一个元素，以便元素在 HTML 代码中出现的顺序。但是，有时您希望 Tab 键顺序略有不同。在这种情况下，您可以使用 tabindex 属性对字段进行编号。

看一下示例:

<form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=1 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=3 /><br />
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=2 /><br />
</form> 

跳位顺序从具有显式 tabindex 值的元素开始，从最低数字到最高数字。相同值的标签按照它们在文档中出现的顺序进行选项卡选择。要从 Tab 键顺序中排除某个元素，请将 tabindex 的值设置为 0。在这种情况下，当用户在表单周围按 Tab 键时会跳过该元素。

tabindex 属性也可以与 <a> 一起使用<textarea> <select>和元素。

请引用这些链接

https://msdn.microsoft.com/en-us/library/aa733550(v=vs.60).aspx

https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/