0

私はこのようなフォームを持っています

<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>

私が欲しいのは、ユーザーがコメントボックスに入力した後、Enterキーを押したときに、動的に別の入力ボックスにjavascriptを使用してコメントラベルを表示する必要がある場合です。

誰でもコードを書くのを手伝ってもらえますか...

4

2 に答える 2

0

まず、フォーム内のすべての入力名が同じ (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);
        }
    }
});

それが役に立ったかどうか、またはさらに情報が必要な場合はお知らせください。

于 2012-07-15T10:19:27.840 に答える
0

これを試してみてください：

<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>
于 2012-07-15T10:20:45.013 に答える