javascript - 输入 key 以跟随tabindex(在将输入 key 更改为具有选项卡的情况下)

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

从SO答案中获得各种信息，我想到了Jquery使用Enter键作为选项卡。但是，无法弄清楚如何遵循上面实现的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。我该如何解决

最佳答案

您不仅可以关注下一个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>

关于javascript - 输入 key 以跟随tabindex(在将输入 key 更改为具有选项卡的情况下)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38489379/