Html 如何使文本区域中的“Enter”键提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8934088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make "Enter" key in a textarea submit a form
提问by Ingrid
I have a chat that uses textarea instead of text for obvious reasons. This is why each time members hit ENTER they get a new line instead of sending the message. I would like to change this, so every time they hit ENTER =the message to be submitted and then the cursor to return on textarea for their next message typing. I've tried different codes found on this site, most didnt work and those who seemed to do something were just refreshing the page and i got a blank page.
由于显而易见的原因，我有一个使用 textarea 而不是 text 的聊天。这就是为什么每次成员按 ENTER 时，他们都会得到一个新行而不是发送消息。我想改变这一点，所以每次他们点击 ENTER = 要提交的消息，然后光标返回到 textarea 以进行下一条消息输入。我尝试了在这个网站上找到的不同代码，大多数都不起作用，那些似乎做了一些事情的人只是刷新页面，我得到了一个空白页面。
My code:
我的代码：
<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>
Thank you very much for your time.
非常感谢您的宝贵时间。
采纳答案by Anders Arpi
I have created a jsfiddle with an example on how to do it with jQuery and the keypressfunction and whichproperty: http://jsfiddle.net/GcdUE/
我创建了一个 jsfiddle，其中包含一个关于如何使用 jQuery 以及keypress函数和which属性执行此操作的示例：http: //jsfiddle.net/GcdUE/
Not sure exactly what you are asking for more than this, so please specify your question further if possible.
不确定您要求的比这更多，所以如果可能，请进一步说明您的问题。
$(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();
}
});
});
回答by Sergio Cabral
Try this (note that when you press ENTER go submit, but SHIFT+ENTER go new line.
试试这个（请注意，当您按 ENTER 时提交，但 SHIFT+ENTER 转到新行。
$("#textareaId").keypress(function (e) {
if(e.which == 13 && !e.shiftKey) {
$(this).closest("form").submit();
e.preventDefault();
}
});
回答by Dimitar Nestorov
Vanilla JavaScript solution
原生 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);
If you would prefer to not submit if Shift is clicked all you need to do is change line 2 to:
如果您不想在单击 Shift 时不提交，您需要做的就是将第 2 行更改为：
if(event.which === 13 && !event.shiftKey){
To clear the textarea just add this inside the if statement body
要清除 textarea 只需将其添加到 if 语句正文中
event.target.value = "";
To use this with Internet Explorer 11 change line 3 to:
要将其与 Internet Explorer 11 一起使用，请将第 3 行更改为：
var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);
But wait? Why not use
event.target.form.submit();?
可是等等？为什么不使用
event.target.form.submit();？
When you invoke the submit method of the form the event listeners will not be called.
当您调用表单的提交方法时，不会调用事件侦听器。
Demo:
演示：
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>回答by Kai Qing
Well, supposing you were using jquery it would be a simple listener on your input field:
好吧，假设您正在使用 jquery，它将是您输入字段上的一个简单侦听器：
In your footer before </body>:
在 </body> 之前的页脚中：
<script type="text/javascript">
$(document).ready(function(){
$('#usermsg').keypress(function(e){
if(e.which == 13){
// submit via ajax or
$('form').submit();
}
});
});
</script>
In your html head add this:
在您的 html 头中添加以下内容：
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
but if js or jquery is out of the question then perhaps update your question to specifically exclude it.
但是如果 js 或 jquery 是不可能的，那么也许可以更新您的问题以明确排除它。
回答by Jukka K. Korpela
Use <input type=text>instead of <textarea>. Then you have much better chances. In textarea, hitting Enter is supposed to mean a line break in text, not submission of text.
使用<input type=text>代替<textarea>。那么你有更好的机会。在 中textarea，按 Enter 应该表示文本换行，而不是提交文本。
