Question

一行中有5个文本框，每个文本框都有一个特定的复选框。当我选中第3个复选框时，当我从第1个文本框中选择表格时，按TAB键，然后它将转到第2个文本框，当我会再次按TAB KEY，现在这次它将跳过第3个文本框（因为这次我已经检查了第3个复选框。）确保这次我也能在textbox中添加值。只是想做的是在制表期间，第3个文本框将被滑动。enter code here

<head>
    <title>TAB PROGRAM</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- define the toggle function -->
    <script type="text/javascript">
        function toggleState(item) {

            if (document.getElementById("check" + item).checked == true) {

                document.getElementById("realname" + (item + 1)).focus();

            }

        }
    </script>
</head>
<body>
    <form ACTION="" METHOD=POST>
        <table BORDER CELLPADDING=10 CELLSPACING=10>
            <tr>
                <td>Enter Full name:
                    <input type="text" id="relanme1" tabindex="1" onfocus="toggleState(1)">
                    <input type="checkbox" id="check1" value="check1" tabindex="-1">
                </td>
                <td>
                    <input type="text" id="realname2" class="test" onfocus="toggleState(2)">
                    <input type="checkbox" id="check2" value="check2" tabindex="-1" />
                </td>
                <td>
                    <input type="text" id="realname3" class="test" onfocus="toggleState(3)">
                    <input type="checkbox" id="check3" value="check3" tabindex="-1" />
                </td>
                <td>
                    <input type="text" id="realname4" class="test" onfocus="toggleState(4)">
                    <input type="checkbox" id="check4" value="check4" tabindex="-1" />
                </td>
                <td>
                    <input type="text" id="realname5" class="test" onfocus="toggleState(5)">
                    <input type="checkbox" id="check5" value="check5" tabindex="-1" />
                </td>
        </table>
    </form>
</body>

</html>

Answer 1

每次单击复选框时，都会更改tabindex的{{1}}。当您使用 TAB 进行导航时，这将跳过该元素，但是当您单击它时它不会阻止获得焦点

HTML：

input

JS：

<input type="text" id="realnme1" tabindex="1">
<input type="checkbox" id="check1" value="check1" tabindex="-1" onchange="toggle('1')">

在这里你可以找到完整的例子： http://jsfiddle.net/owrazh7h/1/

想要基于tabindex属性跳过文本框

1 个答案: