在填充另一个输入框时动态添加输入框 - adding input box dynamically when filling the other input box

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);
        }
    }
});

如果这有帮助，或者你需要更多信息，请告诉我。