如何在textarea中输入"Enter"键提交表格

Question

我有一个使用textarea而不是文本的聊天,原因很明显.这就是每次成员点击ENTER时他们得到一个新行而不是发送消息的原因.我想改变它,所以每次他们点击ENTER =要提交的消息然后光标返回textarea以便他们下一个消息输入.我尝试过在这个网站上找到的不同代码,大多数都没有用,而那些似乎做某事的人只是刷新页面,我得到了一个空白页面.

我的代码:

<form name="message" action="">
    <textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;">
    </textarea>
    <br/>

    <p style="margin-left: 420px;"><input name="submitmsg" type="submit"  id="submitmsg" value="Send" /></p>
</form>

非常感谢您的宝贵时间.

Answer 1

试试这个(注意当你按下ENTER然后提交,但是SHIFT + ENTER进入新行.

$("#textareaId").keypress(function (e) {
    if(e.which == 13 && !e.shiftKey) {        
        $(this).closest("form").submit();
        e.preventDefault();
    }
});

Answer 2

我已经创建了一个jsfiddle,其中有一个关于如何使用jQuery以及keypress函数和which属性的示例:http://jsfiddle.net/GcdUE/

不确定您要求的更多是什么,所以请尽可能进一步说明您的问题.

$(function() {
    $("#usermsg").keypress(function (e) {
        if(e.which == 13) {
            //submit form via ajax, this is not JS but server side scripting so not showing here
            $("#chatbox").append($(this).val() + "<br/>");
            $(this).val("");
            e.preventDefault();
        }
    });
});

Answer 3

Vanilla JavaScript解决方案

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

如果您不想提交单击Shift,则只需将第2行更改为:

if(event.which === 13 && !event.shiftKey){

要清除textarea,只需在if语句体中添加它

event.target.value = "";

可是等等？为什么不用event.target.form.submit();？

当您调用表单的submit方法时,将不会调用事件侦听器.

Answer 4

好吧,假设您使用的是jquery,它将是您输入字段上的一个简单监听器:

在你的页脚</ body>之前:

<script type="text/javascript">
$(document).ready(function(){
    $('#usermsg').keypress(function(e){
      if(e.which == 13){
           // submit via ajax or
           $('form').submit();
       }
    });
});
</script>

在你的html头中添加:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> 

但如果js或jquery是不可能的,那么可能会更新你的问题以专门排除它.