在填充另一个输入框时动态添加输入框
adding input box dynamically when filling the other input box
我有一个类似的表单
<FORM method="post">
<TABLE>
<TR>
<TD>Username</TD>
<TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
</TR>
<TR>
<TD>Age</TD>
<TD><INPUT type="text" value="" name="username" title="Enter Age"/><TD>
</TR>
<TR>
<TD>City</TD>
<TD><INPUT type="text" value="" name="username" title="Enter City"/><TD>
</TR>
<TR>
<TD>Comment</TD>
<TD><INPUT type="text" value="" name="username" title="Enter Comment"/><TD>
</TR>
</TABLE>
</FORM>
我想要的是,当用户填写完注释框后,当他们按下回车键时,另一个输入框必须使用javascript动态显示注释标签。
有人能帮我写代码吗。。。
试试这个我的朋友:
<FORM method="post">
<TABLE>
<TR>
<TD>Username</TD>
<TD><INPUT type="text" value="" name="username" title="Enter Username"/><TD>
</TR>
<TR>
<TD>Age</TD>
<TD><INPUT type="text" value="" name="age" title="Enter Age"/><TD>
</TR>
<TR>
<TD>City</TD>
<TD><INPUT type="text" value="" name="city" title="Enter City"/><TD>
</TR>
<TR>
<TD>Comment</TD>
<TD><INPUT class="comment" type="text" value="" name="comment[]" title="Enter Comment"/><TD>
</TR>
</TABLE>
</FORM>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('.comment').live('keydown', function(e){
$field = $(this);
// capture enter key being pressed
if (e.which == 13)
{
$html = $(this).parents('tr').clone();
$html.find('input').val('');
$html.appendTo($field.parents('table'));
}
});
});
</script>
首先,表单中的所有输入名称都是相同的(name="username"),您必须为每个输入指定一个唯一的名称。
因此更改的注释输入
<TR id="comment">
<TD>Comment</TD>
<TD><INPUT type="text" value="" name="comment[]" title="Enter Comment"/><TD>
</TR>
注意,我向TR添加了id,这样使用jquery就更容易锁定它,而且我还将输入名称更改为comment[]
,因为如果向dom添加新注释,就会有一个注释数组。
如果新注释应该有一个新名称,如:"comment2",您可以将其更改为仅为"comment"
现在,使用Jquery执行以下操作:
$(document).keypress(function(e) {
//catch enter event
if(e.which == 13) {
var $comment = $('#comments);
//check that the user entered something in the comment input
if($comment.find('input').val().length > 0)
{
//create new comment element and attach it to DOM
var $newComment = $comment.clone().removeAttr('id');
$('form table').append($newComment);
}
}
});
如果这有帮助,或者你需要更多信息,请告诉我。
相关文章:
- Highcharts:根据表单输入动态显示数据
- 如何根据两个不同的输入动态设置链接的路径
- 使用用户输入动态转换数据(Highcharts,JavaScript,Django)
- 基于文本输入动态更改图片
- 如何为jQuery帖子输入动态数据参数
- 根据用户表单输入动态生成 SQL 语句
- 使用单选按钮将文本输入动态添加到列表中
- 如何将外部输入动态注入 SlimerJS 脚本
- 根据用户输入动态设置高图表尾行选项
- 如何根据输入动态形成字符串
- 将用户输入动态地附加到<script src=“">来自Java Script中的文本框
- 使用其他输入动态添加和删除输入
- Rails根据用户输入动态更新View
- 在Powerpoint中根据用户输入动态更改幻灯片
- 使用用户输入动态创建表
- 从输入动态添加选项
- 根据用户输入动态创建HTTP链接
- 如何检测输入动态变化时的变化
- Angular2使用输入动态添加到表单模型中
- 禁用按钮和输入动态名称