如何在无线电和输入字段组上使用tabindex和箭头键

时间：2017-07-27 16:34:51

标签： javascript html

我有一个类似于下面所示的表格。有一组无线电和输入字段对应。

form page

应遵循的条件

  1. 第一个标签索引选择第一组第一个广播。必须更改包含选择我可以使用箭头键
  2. 第二个标签索引应该从第2组中选择第一个广播。必须更改包含选择我可以使用箭头键
  3. 而在第2组中，如果我再次按Tab键，它应该专注于与收音机相对应的文本框
  4. 再次按Tab键应将焦点集中到第3组文本框

    5. 除了选择第2组的第一个无线电以外，所有上述条件都有效。按Tab键确实将其带到相应的文本框。但是再次按Tab键会转到第2组的另一个文本框（这不应该发生）。

    请帮忙。 HTML代码如下

    ＆＃13;
    ＆＃13; 
    <html>
     <body>
      Please select gender (Group 1)<br>
       <input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
       <input type="radio" name="gender"tabindex="1" value="female"> Female
    <br><br>


      Please select one of following (Group 2)<br>
       <input type="radio" checked name="payment"tabindex="2" value="amount"> $<input type="text" tabindex="2.1"><br>
       <input type="radio" name="payment" tabindex="2" value="installment">#<input type="text" tabindex="2.1">
      <br><br>


       Please select payment date (Group 3)<br>
       <input type="text" tabindex="3">

     </body>
    </html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    ＆LT;＆LT;当光标处于位置时尝试按Tab键，如图像＆gt;＆gt;

    所示

2 个答案:

答案 0 :(得分：1)

由于您的帖子标有javascript，我认为允许使用javascript。禁用输入字段将阻止＆＃39; tabed＆＃39;它。因此，在＆＃39;＃＆＃39;之后禁用文本字段。默认情况下（通过添加disabled="disabled"）并将onchange-events添加到单选按钮以禁用＆＃39; $＆＃39;之后的文本字段。并在＆＃39;＃＆＃39;之后启用文本字段（反之亦然）。

onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "

并将正确的id添加到文本字段中，以便javascript-selectors可以正常工作。

完整代码：

＆＃13;
＆＃13; 
<html>
     <body>
      Please select gender (Group 1)<br>
       <input type="radio" checked name="gender" tabindex="1" value="male"> Male<br>
       <input type="radio" name="gender"tabindex="1" value="female"> Female
    <br><br>


      Please select one of following (Group 2)<br>
       <input type="radio" checked name="payment"tabindex="2" value="amount" onchange="document.getElementById('amount').disabled=null; document.getElementById('installment').disabled='disabled'; "> $<input type="text" tabindex="2.1" id="amount"><br>
       <input type="radio" name="payment" tabindex="2" value="installment" onchange="document.getElementById('amount').disabled='disabled'; document.getElementById('installment').disabled=null; ">#<input type="text" tabindex="2.1" disabled="disabled" id="installment">
      <br><br>


       Please select payment date (Group 3)<br>
       <input type="text" tabindex="3">

     </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以在未选中的文本框中使用JavaScript设置tabindex="-1"，因此浏览器会在标签顺序中忽略此文本框。然后您也可以删除所有这些手动tabindex定义，因为默认情况下浏览器已经遵循了所需的Tab键顺序。

相关问题
最新问题