1

我在页面上有以下结构

<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>

我需要在输入键和按钮之间切换焦点。切换顺序应根据标签索引。并且切换应该在表单内循环，例如如果焦点设置在“取消​​”按钮上，则下一次输入将在本例中将焦点设置在第一个输入上。对于任何帮助，我将不胜感激。

4

2 回答 2

2

这应该有效：

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/

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

于 2013-03-09T14:41:59.997 回答
0

如果您要在要循环输入的字段中添加一个名为“TabOnEnter”的类。

$(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
        }   
      });​
于 2013-03-09T14:28:02.653 回答