使用回车键按下提交没有提交按钮的textarea表单

时间:2012-11-15 16:24:51

标签: php javascript forms submit enter

背景: 我正在制作一个类似于Facebook墙的页面,它会有很多帖子,你应该可以评论每个帖子。所以在这一页中有很多形式(当然)。我只需要提交其中一个。

所以是的,我已经找到了这个问题的答案,但没有一个有效,所以在这里问:

我有一个这样的表格:

    <form enctype="text/plain" action="submitcomment.php" method="post" target="output_frame" id="comment<?php echo $prepare_data['post_id']; ?>">
    <textarea name="comment" id="comment" onkeypress="return submitViaEnter(event)" value="" autocomplete="off"></textarea>
    <input type="hidden" name="hiddenid" id="hiddenid" value="<?php echo $prepare_data['post_id']; ?>" />
    </form>

我的JavaScript函数如下所示:

function submitViaEnter(evt) {
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var form = target.form;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
        document.forms[this.form.id].submit();
        alert("sent!");
        return false;
    }
    return true;
}

如果我使用文本框,它可以工作,但是当我使用textarea时,它不起作用。试图按Enter键什么也没做。

3 个答案:

答案 0 :(得分:1)

使用jQuery并通过javascript将事件绑定到事件:

$(function(){
    $('form > textarea').on('keyup', function(e){
        if (e.keyCode == 13) {
            // do whatever you want to do, for example submit form
            $(this).parent('form').trigger('submit');
        }
    });
});

虽然要小心这一点 - 它会在每一行都提交。人们倾向于在textareas中写多行文本,因此这种行为可能是意外的

答案 1 :(得分:0)

此代码流在jsfiddle test中正常工作。请注意,您不应该使用e.charCode,因为e.keyCode(IE)和e.which(其他所有内容)就足够了。请参阅this question

此外,您找到表单的代码过于复杂而且没有必要,请更改:

var form = target.form;
...
document.forms[this.form.id].submit();

对此:

target.form.submit();

答案 2 :(得分:-2)

让你的textareas像以前一样嵌套在你的表单中,但给他们的是类名而不是id。这样,jquery可以使用该特定的类名引用DOM中的所有textareas。

<form name="form1" enctype="text/plain" action="submitcomment1.php" method="post" target="output_frame">
<textarea name="comment1" class="comment" value="" autocomplete="off"></textarea>
</form>
<form name="form2" enctype="text/plain" action="submitcomment2.php" method="post" target="output_frame">
<textarea name="comment2" class="comment" value="" autocomplete="off"></textarea>
</form>

然后,像这样调整Jura的代码,它应该引用文本字段所在的正确形式。

$(function(){

  $('.comment').on('keyup', function(e){

    if (e.keyCode == 13) {

      $(this).parent('form').trigger('submit');

    }
  });
});