标签索引在html和jquery的表单之间导航时不起作用


Tab index doesn't work when navigate between forms in html and jquery

我正在做一个项目,用户需要在PHP中填写表单。

点击这里查看截图1

现在,在填写表单时,我添加了一个名为"添加另一个文件"的按钮;删除"一旦点击此按钮,一组表单重新出现,当点击删除时,新添加的表单将被删除。

点击这里查看截图2

现在我的问题是我使用选项卡索引在文本框之间导航,当"添加另一个文件"被单击时,表单的一部分重新出现,现在tabindex移动到开始位置,而不是到新放置的表单文本框。

HTML编码的形式::

<input type="text" id="filename1"  tabindex="1" class="in-txt1" placeholder="* File Name">
             <input type="text" id="length1" class="in-txt1 txt" tabindex="2" placeholder="* File Length">
             <input type="text" id="speaker1" tabindex="3" class="in-txt1" placeholder="* Speaker">
            </div>
            <div class="in-row">
            <input type="text" id="category1" tabindex="4" class="in-txt1" placeholder="* Category">   
            <input type="text" id="costmin1" tabindex="5" class="in-txt1 numeric txtt" placeholder="* Cost/Min">  
            <input type="text" id="cost1" tabindex="6" class="in-txt1 numeric" onpaste="return false;" ondrag="return false;" ondrop="return false;" readonly="true" placeholder="* Cost">   
            </div>
            </p>
             </div>
              <input type="submit" name="addScnt" tabindex="7" style="width:180px;" id="addScnt" value="Add Another File" class="save-entry" />
             <br /><br />
            <div class="in-row"><br>        
            <input type="text" id="email" tabindex="8" placeholder="* Email ID" class="in-txt1">
            <label class="in-txt1">Time Code <input type="checkbox" tabindex="9" id="time" style="float:right; height:20px; width:20px;"></label>
            <label class="in-txt1">Verbatim <input type="checkbox" tabindex="10" id="verb" style="float:right; height:20px; width:20px;"></label>           
            </div>
            <div class="in-row">
            <textarea id="comment" class="in-txt1" tabindex="11" placeholder="* Comment"></textarea>
            <label class="in-txt1">Rush <input type="checkbox" tabindex="12" id="rush" style="float:right; height:20px; width:20px;"></label>
            </div>
            <div  id="invoice" tabindex="13" class="save-entry" style="margin: 8px -83px 0 0;width: 50px;">Submit</div><br> 
            <div align="center" class="msg" style="color: rgb(85, 85, 85);width: 400px;float: right;height: 44px;line-height: 44px;padding: 0 30px 0 0;"></div>

ADD ANOTHER FILE

<script type="text/javascript">
$(function() {
        var scntDiv = $('#txtlength');
        var i = $('#txtlength p').size() ;

        $('#addScnt').live('click', function() {
        $('<p> <label class="in-row"><input type="text" id="filename'+i+'"  tabindex="7" class="in-txt2" placeholder="* File Name"><input type="text" id="length'+i+'" class="in-txt2 txt" tabindex="7" placeholder="* File Length"><input type="text" id="speaker'+i+'" tabindex="7" class="in-txt2" placeholder="* Speaker"></label><label class="in-row"><input type="text" id="category'+i+'" tabindex="7" class="in-txt2" placeholder="* Category"><input type="text" id="costmin'+i+'" tabindex="7" class="in-txt2 numeric txtt" placeholder="* Cost/Min"><input type="text" id="cost'+i+'" tabindex="7" class="in-txt2 numeric" onpaste="return false;" ondrag="return false;" ondrop="return false;" readonly="true" placeholder="* Cost"></label><input type="button" id="remScnt" value="Remove" class="save-entry1" /></label><br><br><br><br><br><br><br></p>').appendTo(scntDiv);

                i++;
                return false;
        });
        $('#remScnt').live('click', function() { 
                if( i > 1 ) {
                        $(this).parents('p').remove();
                        i--;                            
                }
                return false;
        });
});
</script>

try this.

$('#filename'+i).focus();

将此代码粘贴到