Question

我有一个大表格的对话框（每个表单元素都包含在DIV中，还有标签/工具提示/等）。每当用户点击“tab”时，我希望它专注于下一个div（.fm-req）输入（.defaultTextBox2）。以下是HTML的示例：

<div class="fm-req">
    <label for="">Answer <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label>
    <input name="answer" class="validate[required] defaultTextBox2" maxlength="200" type="text" />
    <input type="button" name="default" value="Default">
</div>
<div class="fm-req">
    <label for="">Answer2 <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label>
    <input name="answer2" class="defaultTextBox2 percent" type="text" />
</div>

可能有许多这些具有一些不同的变化。但是，我只想关注下一个.fm-req.defaultTextBox2。我从一开始就开始：

$(".defaultTextBox2").keydown(function(event) {
     if (event.keyCode == 9) { // 9 is tab key
         $(this).find('.fm-req').next('.defaultTextBox2').focus();
    }
});

但我似乎无法让它发挥作用......

Answer 1

不需要javascript，只需使用HTML tabindex属性：

<div class="fm-req">
    <label for="">Answer <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label>
    <input tabindex="1" name="answer" class="validate[required] defaultTextBox2" maxlength="200" type="text" />
    <input type="button" name="default" value="Default">
</div>
<div class="fm-req">
    <label for="">Answer2 <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label>
    <input tabindex="2" name="answer2" class="defaultTextBox2 percent" type="text" />
</div>

Answer 2

$(".defaultTextBox2").keydown(function(event) {
    if (event.keyCode == 9) { // 9 is tab key
         event.preventDefault();
         $(this).parent().nextAll('.fm-req:has(.defaultTextBox2)').first().find('.defaultTextBox2').focus();
    }
});

jquery对话框 - 专注于下一个文本框

2 个答案: