输入键以跟随tabindex（在输入键被更改为表现为tab的情况下） [英] enter key to follow the tabindex (in scenario where enter key is changed to behave as tab)

问题描述

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

I have a 3x3 table within a form. By default tab key moves the cursor in horizontal directions on these input fields. When a tabindex is given ( Like in the example below) the tab key moves cursor columns wise instead of row wise, as I needed.

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

With various sources from SO answers, I came up with the Jquery to use enter key as tab. But, could not figure out how to follow the tabindex as achieved above , i.e by pressing enter key instead of cursor moving row-wise, i want it to move in column wise. Below is what I have so far, any help is appreciated.

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

Demo of how it currently works. http://jsfiddle.net/unCu5/125/

以下代码的来源： jquery如何捕获输入密钥并将事件更改为标签

<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。我如何解决这个问题

@Dekel solution work for the html scenario he displayed, but I have a different type of HTML on view source. How do I fix this

推荐答案

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

Instead of just focus the next input element, you can find the next element (based on the tabindex) and focus on him:

$('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>

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

The code doesn't support go back from the last input to the first. You will need to write it explicitly.

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

The original question didn't mention that tabindex could repeat or don't have sequential values. This code will "fix" the values of tabindex based on the order in the code AND the values of the tabindex. It will support both repeated tabindex values and non sequential values (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>

这篇关于输入键以跟随tabindex（在输入键被更改为表现为tab的情况下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！