Html 如何制作；输入“；输入文本区域提交表单

我有一个聊天室，使用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>

---

非常感谢您的时间。

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

在页脚之前：

$（文档）.ready（函数（）{
$（'#usermsg'）。按键（函数（e）{
如果（e.which==13）{
//通过ajax或
$（'form'）.submit（）；
}
});
});

在html标题中添加以下内容：

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

---

但是，如果js或jquery是不可能的，那么也许可以更新您的问题以明确排除它。

我创建了一个JSFIDLE，其中有一个示例，说明如何使用jquery和

键按
函数以及
属性：

不确定您的要求是否超出此范围，因此，如果可能，请进一步说明您的问题

$(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();
        }
    });
});

$（函数（）{
$（“#usermsg”）。按键（功能（e）{
如果（e.which==13）{
//通过ajax提交表单，这不是JS，而是服务器端脚本，所以这里不显示
$（“#聊天室”）.append（$（this.val（）+”
）；
$（此）.val（“”）；
e、 预防默认值（）；
}
});
});
使用
而不是
。那你就有更好的机会了。在
textarea
中，按Enter键意味着文本中的换行，而不是提交文本。
试试这个（请注意，按Enter提交，并且Shift+Enter添加新行）

香草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 = "";


要在Internet Explorer 11中使用此选项，请将第3行更改为：

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


但是等等？为什么不使用
event.target.form.submit（）

调用表单的submit方法时，不会调用事件侦听器


演示：


函数submitOnEnter（事件）{
if（event.which==13）{
event.target.form.dispatchEvent（新事件（“提交”{cancelable:true}））；
event.preventDefault（）；//防止在文本字段中添加新行（在许多情况下不需要）
}
}
document.getElementById（“usermsg”）.addEventListener（“按键”，提交输入）；
document.getElementById（“表单”）.addEventListener（“提交”，“事件）=>{
event.preventDefault（）；
控制台日志（“提交的表格”）；
});

提交

php

echo“txt”；
你在说什么编程语言？HTML？Php是编程语言。可能是因为如果在
中键入太长的文本，文本不会像在textarea中那样包装。编程语言在这里应该是无关的，因为这是客户端请求。嗯..我将阅读关于textbox的文章，看看这是怎么回事。谢谢。安德斯，这很有效，但是消息只停留了一秒钟，然后就从聊天中消失了。好的，编辑了一些内容以适合我的聊天，您的代码现在可以完美地工作了，谢谢大家，您真是太好了！很好，但将[if（e.which==13）{]更改为[if（e.which==13&&！e.shiftKey）{]//通过这种方式，我们可以在新行中键入SHIFT+ENTER。我尝试过，但似乎不起作用，或者我根本不知道如何正确操作。是否需要更改代码中的某些内容？tyI更新了我的答案。对不起，我忘了将您的id添加到文本区域。好的，现在它有响应，似乎我正确插入了它，但我得到了一个空白页，如refresh.Anders代码似乎是我聊天的代码，它发送消息，但由于某种原因，消息只出现1秒，它聊天，puf消失。奇怪的是，你需要用你的php代码更新你的问题。因为如果这样做，那么你的后端就不工作了。是的，我知道，它过去是文本，但对于聊天时间较长的人来说是个问题sts（就像在这个评论框中）只有一行。感谢您花时间回答。我写这个例子已经很久了。但是返回false的原因是为了防止事件传播（就像它做的那样：e.preventDefault（））。可能没有必要，但我不记得了。因此，测试时，按Enter键似乎会发送表单（至少表单已关闭），但textarea的内容不会保存。@SergioCabral使用e.preventDefault（）；很有帮助，因为按Enter键后，只有JS启动，而不会向textarea添加新行。请注意，
new Event（）
在中不起作用IE11@pttsky添加了一个关于香草的IE 11拇指的注释。谁想要JQuery？请考虑你正在做什么。在提交表单的同时，它也在一些浏览器中的选择框中输入了一个换行框，如果表单保持不变，你不需要。调用方中的“return KP（）；”。有关类似示例，请参阅
event.target.value = "";

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

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

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