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

我将光标放在textbox1内,然后按Tab键。光标移至textbox2。如何控制javascript或jQuery中的Tab键行为。我想做的是在textbox1抛出焦点事件的那一刻,我想检查某些条件(business condition),并基于此条件允许默认的Tab键行为或将光标指向我想要的位置。

谁能指导我该怎么做?

我假设的是以下事件流
:在文本框1-> textbox1焦点事件-> textbox2中按下tab键即可。基本上,我想在焦点事件之后和textbox2选择之前进行一些控制。我之前使用过jQuery focusout事件,但是它的作用是,它触发focusout事件并选择textbox2,从而无法达到我想在选择textbox2之前检查某些条件的目的

最佳答案

首先,您需要找到键码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>





或者可能是您需要更改选项卡顺序,这就是您可以使用的tabindex属性

HTML表单中的所有元素(隐藏元素除外)都是表单选项卡顺序的一部分。当用户按下Tab键时,浏览器将输入焦点从一个元素移到另一个元素,以使元素出现在HTML代码中。但是,有时您希望制表符顺序的流动有所不同。在这种情况下,您可以使用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值的元素开始,从最小的数字到最大的数字。相同值的标签将按其在文档中出现的顺序进行标签选择。要从选项卡顺序中排除元素,请将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/

09-25 22:09