Question

我有一个表单并且在Tab键上按下字段应该是焦点旋转清楚。请参阅以下代码。

    $('#e').keyup(function (e) {
        if (e.which === 9)
            $("#a").focus();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type = "text" id = "a" name="a" /><br/>
<input type = "text" id = "b" name="b" /><br/>
<input type = "text" id = "c" name="c" /><br/>
<input type = "text" id = "d" name="d" /><br/>
<input type = "text" id = "e" name="e" /><br/>

当它转到字段'e'时，它直接转到'a'即可。但它不等待'e'没有必要有机会进入'e'字段

请指导我。

Answer 1

问题是在之后发生了keyup事件，它已将焦点移到下一个字段。

您需要在keydown事件上执行此操作：

＆＃13;

    $('#e').keydown(function (e) {
        if (e.which === 9){
            $("#a").focus();
            e.preventDefault();
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type = "text" id = "a" name="a" /><br/>
<input type = "text" id = "b" name="b" /><br/>
<input type = "text" id = "c" name="c" /><br/>
<input type = "text" id = "d" name="d" /><br/>
<input type = "text" id = "e" name="e" /><br/>

＆＃13;

需要e.preventDefault()或简称return false;的原因是keydown仍会从当前关注控件（即{{1}转到#a）

如果您希望它更通用，请忘记ID并使用#b和:last选择器

e.g。

:first

Answer 2

你需要的是一个keydown事件，而不是keyup。 tab键的默认行为是在keydown上移动下一个目标。

$('#e').keydown(function (e) {
    if (e.which === 9) {
        e.preventDefault();
        $("#a").focus();
    }
});

请参阅更新后的fiddle。

Answer 3

您必须更改已倾听的事件，不要忘记停止事件传播

$('#e').keydown(function (e) {
    if (e.which === 9) {
        $("#a").focus();
        e.preventDefault();
    }
});

jsFiddle

Answer 4

我将答案编辑成正确答案。查看此更新的fiddle

//prevent default behavior
$(document).on('keydown', 'input[type="text"]', function(e) {
    if(e.keyCode === 9) {
      e.preventDefault();  
    }      
});

$(document).on('keyup', 'input[type="text"]', function(e) {

    if(e.keyCode === 9) {
        if($(this).index()+1 < $(this).siblings().length) {
            $(this).siblings().eq($(this).index()+1).focus();
            return false;
        }
        else {
            $(this).siblings().first().focus();
        }
    }
});

Answer 5

这是另一个可以处理无限期输入的方法。此外，这并不依赖于ID。

＆＃13;

var $inputs = $('input');
var $lastInput = $inputs.last();
$inputs.keydown(function (e) {
    if ( e.which === 9 && $lastInput.is(":focus") ) {
        $inputs.first().focus();
        e.preventDefault();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>
<input type = "text" /><br/>

＆＃13;

如何使用jquery处理tab键

5 个答案: