如何从iPhone用户的多个表单中删除"下一个"和"上一个"按钮？

Question

例如,如果我有以下代码:

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

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

当我选择"one"形式的输入时,会出现Next按钮,当我单击Next时,它会转到"two"形式的输入.

有没有办法在当前表单中只有表单元素的Next和Previous？

Answer 1

您可以使用每个输入上的负选项卡索引来完成此操作.

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

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

上面的示例将阻止ID为"1"的表单与ID为"2"的表单进行标签.也就是说,它没有解决能够在活动表单中选项卡的问题.

为此,您可以从第一种形式的输入的正选项卡索引和第二种形式的输入的负选项卡索引开始.当聚焦第二种形式的输入时,您将更新第一种形式的选项卡索引为负数.这是一种令人费解的方法,但它会起作用.

更新

以下是上述解决方案如何运作的小提琴.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();