繁体   English   中英

提交textarea表单,而没有带有Enter键的提交按钮

[英]Submit textarea form without a submit button with Enter key press

背景:我正在制作一个类似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键无济于事。

使用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');
        }
    });
});

不过要小心-它会在每个新行中提交。 人们倾向于在文本区域中编写多行文本,因此这种行为可能是意外的

此代码流工作在一个精致的jsfiddle测试 请注意,你不应该使用e.charCode ,作为e.keyCode (IE)和e.which (一切)就足够了。 看到这个问题

此外,您查找窗体的代码是过于复杂,没有必要,更改此:

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

对此:

target.form.submit();

与以前一样,将文本区域嵌套在表单中,但给它们类名而不是id。 这样,jQuery可以使用特定的类名引用DOM中的所有文本区域。

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

    }
  });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM