使用tab索引在html和jquery中的表单之间导航的问题 [英] Problen in using tab index to navigate between forms in html and jquery
问题描述
我正在开发一个用户需要用PHP填写表单的项目。
点击此处查看屏幕截图1 [ ^ ]
现在填写表格时,我已经添加了一个名为添加另一个文件和删除的按钮,一旦单击此按钮,一组表格重新显示 - 单击删除时出现,新添加的表单将被删除。
点击此处查看截屏2 [ ^ ]
现在我的问题是我使用tab index在文本框之间导航,当点击Add Another File时,表单的一部分重新出现,现在tabindex移动到开始位置而不是新放置的表格文本框。
格式的编码::
Hii am working on a project where the user needs to fill up a form in PHP.
Click here for Screenshot 1[^]
Now while filling up the form I have added a button called "Add Another File & Remove" once this button is clicked a set of forms re-appears when Remove is clicked the newly added form will be removed .
Click here for Screenshot 2[^]
Now my problem is I used tab index to navigate between the text box , when "Add Another File" is clicked a part of form reappears and now the tabindex moves to the beginning position and not to the newly placed text box of the form .
HTML coding of the form ::
<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;" öndrop="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>
</div>
添加另一个文件的Jscript
Jscript for the ADD ANOTHER FILE
<pre lang="xml"><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>
谢谢提前..
Thanks in advance ..
推荐答案
( function (){
var scntDiv =
(function() { var scntDiv =
(' #txtlength' );
var i =
(' #txtlength p')。size();
('#txtlength p').size() ;
这篇关于使用tab索引在html和jquery中的表单之间导航的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!