如何使文本区域中的“Enter”键提交表单

Question

出于显而易见的原因，我有一个使用文本区域而不是文本的聊天。这就是为什么每次成员按 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) {
        e.preventDefault();
    
        $(this).closest("form").submit();
    }
});

Answer 2

原生 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){

---

要清除文本区域，只需将其添加到 if 语句正文中

event.target.value = "";

---

要将其与 Internet Explorer 11 一起使用，请将第 3 行更改为：

var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);

---

但是等一下？为什么不使用event.target.form.submit();？

当您调用表单的提交方法时，不会调用事件监听器。

---

演示：

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

document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault();
    console.log("form submitted");
});

<form id="form">
    <textarea id="usermsg"></textarea>
    <button type="Submit">Submit</button>
</form>

Answer 3

我创建了一个 jsfiddle，其中包含一个示例，说明如何使用 jQuery 以及 keypressfunction 和 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 4

好吧，假设您使用的是 jquery，它将是您输入字段上的一个简单侦听器：

在您的页脚

Answer 5

function KP()
{    
var x = event.keyCode;
   if(x==13)
        {
            // alert (x);
            document.message.submit();
        }
}

php

echo '<textarea  name="usrMsg" id="usrMsg" OnKeyPress="KP();">'txt'</textarea>';

Answer 6

使用<input type=text> 代替<textarea>。那么你有更好的机会。在textarea 中，按 Enter 应该意味着文本中的换行符，而不是提交文本。