3

For example, if I have the following code:

<form id="one">
    <input type="text"/>
</form>

<form id="two">
    <input type="text"/>
</form>

When I select the input in form "one", the Next button appears, and when I click Next, it takes me to the input in form "two".

Is there a way to only have Next and Previous for form elements inside the current form?

4

1 回答 1

6

您可以在每个输入上使用负标签索引来完成此操作。

<form id="one">
    <input type="text" tabindex="-1">
</form>

<form id="two">
    <input type="text" tabindex="-2">
</form>

上面的示例将阻止从 ID 为“one”的表单切换到 ID 为“two”的表单。也就是说，它没有解决能够在活动表单中进行选项卡的问题。

为此，您可以从第一种形式的输入的正标签索引和第二种形式的输入的负标签索引开始。当第二个表单中的输入获得焦点时，您会将第一个表单的选项卡索引更新为负数。这是一种复杂的方法，但它会起作用。

更新

这是上述解决方案如何工作的小提琴。JavaScript 代码可以进一步优化，但它应该澄清我对这个问题的回答。请尝试一下，让我知道它是怎么回事。

这是HTML：

<form id="a">
    <input type="text">
    <input type="text">
</form>

<form id="b">
    <input type="text">
    <input type="text">
</form>

<form id="c">
    <input type="text">
    <input type="text">
</form>

这是JavaScript：

// jQuery
var $allInputs = $("input"),
    numInputs = $allInputs.length;

// Update the tab indexes when an input is focused.
$("form").on("focus", "input", function() {
    var $activeForm = $(this).closest("form"),
        $activeFormInputs = $activeForm.find("input");

    // Make the inputs on all inactive forms negative.
    $.each($allInputs, function(i) {
        var $parentForm = $(this).closest("form");

        if ($parentForm != $activeForm) {
            $(this).attr("tabindex", -(numInputs - i));
            $(this).val(-(numInputs - i));
        }
    });

    // This form is active; use positive tab indexes.
    $.each($activeFormInputs, function(i) {
        $(this).attr("tabindex", ++i);
        $(this).val(i)
    });   
});

// Focus the first input.
$("#a").find("input").first().focus();
于 2013-08-31T17:51:14.730 回答