假设我们有两个文本框textbox1和textbox2。
我将光标放在 textbox1 内,然后按 Tab 键。光标移动到文本框2。如何控制
javascript
或 jQuery 中的 Tab 键行为。我想做的是当 textbox1
抛出焦点移出事件时,我想检查某些条件 (business condition)
并基于它我想允许默认的 Tab 键行为或将光标指向我想要的位置。
有人可以指导我该怎么做吗?
我假设的是以下事件流程 :在文本框 1 中按 Tab 键->
textbox1
焦点事件-> textbox2
选定。基本上我想要在 focusout 事件之后和 textbox2 选择之前进行一些控制。我之前使用过 jQuery focusout 事件,但它的作用是,它触发 focusout 事件并选择 textbox2
,这违背了我想在选择 textbox2
之前检查某些条件的目的。
首先您需要找到Keycode
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
属性
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>
Tab 键顺序从具有显式 tabindex 值的元素开始,从最低数字到最高数字。相同值的标签按照它们在文档中出现的顺序进行 Tab 键选择。要从 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/
在您的问题中,您提到按 Tab 和 “textbox1 抛出 focusout 事件的那一刻”。
您可以使用
blur
事件来执行此操作,检查您的状况,如果失败,请重新聚焦控件。
通过添加类,您可以将相同的事件应用于任何控件:
$(".required").blur(function(e) {
if ($(this).val() == "")
$(this).focus(); // or redirect to any other input
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='textbox1' class='required'>
<input id='textbox2' class='required'>
<input id='textbox3' class='notrequired'>