输入键以跟随tabindex（在输入键被更改为表现为tab的情况下）

Question

我在表单中有一个3x3表。默认情况下，Tab键会在这些输入字段上沿水平方向移动光标。当给出tabindex时（如下面的例子中所示），tab键会根据需要移动光标列而不是行。

使用来自SO答案的各种来源，我想出了使用输入密钥作为选项卡的Jquery。但是，无法弄清楚如何按照上面的tabindex，即按Enter键而不是按行移动光标，我希望它按列移动。以下是我到目前为止所提供的任何帮助。

演示当前的工作原理。 http://jsfiddle.net/unCu5/125/

以下代码的来源：jquery how to catch enter key and change event to tab

<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr>
</table>

$('input').live("keypress", function(e) {
  /* ENTER PRESSED*/
  if (e.keyCode == 13) {
    /* FOCUS ELEMENT */
    var inputs = $(this).parents("form").eq(0).find(":input");
    var idx = inputs.index(this);

    if (idx == inputs.length - 1) {
      inputs[0].select()
    } else {
      inputs[idx + 1].focus(); //  handles submit buttons
      inputs[idx + 1].select();
    }
    return false;
  }
})

@Dekel解决方案适用于他显示的html场景，但我在视图源上有不同类型的HTML。我该如何解决这个

Answer 1

不是只关注下一个input元素，而是可以找到下一个元素（基于tabindex）并专注于他：

$('input[tabindex^="2"]');

检查此示例：

$(document).ready(function () { // Will only run once the page Document Object Model (DOM) is ready for JavaScript code 
    // Create a jQuery object containing the html element 'input'
    // Create a .not() method to exclude buttons for keypress event
    $(":input:not(:disabled)").not($(":button")).keypress(function(evt) {
        // If the keypress event code is 13 (Enter)
        if (evt.keyCode == 13) {
            // get the attribute type and if the type is not submit
            itype = $(this).prop('type');
            if (itype !== 'submit') {
                currentTabindex = $(this).attr('tabindex');
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
                    if (nextInput.length) {
                        nextInput.focus();
                        return false;
                    }
                }
            }
        }
    });
});

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="4" placeholder="4" /></td>
        <td><input tabindex="7" placeholder="7" /></td>
    </tr><tr>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="5" placeholder="5" /></td>
        <td><input tabindex="8" placeholder="8" /></td>
    </tr><tr>
        <td><input tabindex="3" placeholder="3" /></td>
        <td><input tabindex="6" placeholder="6" /></td>
        <td><input tabindex="9" placeholder="9" /></td>
    </tr>
</table>

  

代码不支持从最后一个输入返回到第一个输入。您需要明确地编写它。

更新版本 - 修复错误的tabindex值

原始问题没有提及tabindex可能重复或没有连续值。 此代码将根据代码中的顺序和tabindex的值“修复”tabindex的值。它将支持重复的tabindex值和非连续值（1,2,3,6,7）：

function fixTabIndex() {
    // Find all inputs. Their order will be the same order they appear inside your html.
    inputs = $('input');
    // Save the original HTML order of the inputs (we need this to compare their order in the HTML in case or equal two tabindex 
    inputs_original = $('input');
    
    // Sort the inputs by their tabindex values and their position in the DOM
    // More info on Array.prototype.sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
    inputs.sort(function(a, b) {
        if ($(a).attr('tabindex') == $(b).attr('tabindex')) {
            // If tabindex is equal - sort by the position in the DOM
            if (inputs_original.index(a) < inputs_original.index(b)) {
                return -1;
            } else {
                return 1;
            }
        } else if ($(a).attr('tabindex') < $(b).attr('tabindex')) {
            return -1;
        } else {
            return 1;
        }
    });
    // Set the new value of the tabindex based on the position in the sorted array
    inputs.each(function(i, el) {
        $(el).attr('tabindex', i+1);
    });
}

$(document).ready(function () {
    // First we need to fix the tabindex values:
    fixTabIndex();
    $("input").keypress(function(evt) {
        // If the keypress event code is 13 (Enter)
        if (evt.keyCode == 13) {
            // Make sure this is not a submit input
            if ($(this).prop('type') !== 'submit') {
                currentTabindex = $(this).attr('tabindex');
                if (currentTabindex) {
                    nextInput = $('input[tabindex^="'+ (parseInt(currentTabindex)+1) +'"]');
                    if (nextInput.length) {
                        nextInput.focus();
                        return false;
                    }
                }
            }
        }
    });
});

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

<table>
    <tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr><tr>
        <td><input tabindex="1" placeholder="1" /></td>
        <td><input tabindex="2" placeholder="2" /></td>
        <td><input tabindex="3" placeholder="3" /></td>
    </tr>
</table>