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>

エンタープレスで入力とボタンの間でフォーカスを切り替える必要があります。切り替えの順序は、タブのインデックスに従う必要があります。また、切り替えはフォーム内で循環的に行う必要があります。たとえば、フォーカスが[キャンセル]ボタンに設定されている場合、次のEnterキーを押すと、この例の最初の入力にフォーカスが設定されます。助けていただければ幸いです。

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 に答える