Question

我在页面上有以下结构

<div id="testDialog" class="dialogContent">
<form:form action="#" id="testForm">
    <table>
        <tr>
            <td>one</td>
            <td><input id="c1" type="text" maxlength="45" tabindex="49"/></td>
        </tr>
        <tr>
            <td>two</td>
            <td><input id="c2" type="text" maxlength="8" tabindex="50"/></td>
        </tr>
        <tr>
            <td>three</td>
            <td><input id="c3" type="text" maxlength="8" tabindex="51"/></td>
        </tr>
        <tr>
            <td>four</td>
            <td><input id="c4" type="text" maxlength="8" tabindex="52"/></td>
        </tr>
        <tr>
            <td><button type="button" tabindex="53">Confirm</button></td>
            <td><button type="button" tabindex="54">Cancel</button></td>
        </tr>
    </table>
</form:form>
</div>

我需要在输入和按钮之间切换焦点。切换顺序应根据标签索引。并且切换应该在形式内循环，例如，如果焦点设置在“取消”按钮上，则下一个输入将在此示例中将焦点设置为第一个输入。对于任何帮助，我将非常感激。

Answer 1

这应该有效：

var $targets = $('#testForm').find('input, button'),
    steps = $targets.map(function() {
        return $(this).attr('tabindex');
    }).get();

$('#testForm').on('keypress', 'input, button', function(e) {
    if (e.keyCode == 13) {
        var current = $.inArray($(this).attr('tabindex'), steps),
            next = steps[++current % steps.length];
        $targets.filter('[tabindex="' + next + '"]').focus();
    }
});

http://jsfiddle.net/BHA9g/2/

输入从任何字段开始正确循环也很重要，而不仅仅是第一个字段。

Answer 2

如果你要添加一个名为＆＃39; TabOnEnter＆＃39;到你要循环的字段进入。

$(document).on("keypress", ".TabOnEnter" , function(e)
      {

        if( e.keyCode ==  13 )
        {
           var nextElement = $('input[tabindex="' + (this.tabIndex+1)  + '"]');

           if(nextElement.length )// this is for next element
            nextElement.focus();
           else
             $('input[tabindex="1"]').focus();  //this is for first element
        }   
      });

JQuery - 根据tabindex在输入上切换焦点

2 个答案: