如何让“输入”键在文本区域提交表单

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 =要提交的消息，然后光标在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.

非常感谢您的时间。

5 个解决方案

#1

I have created a jsfiddle with an example on how to do it with jQuery and the keypressfunction and which property: http://jsfiddle.net/GcdUE/

我创建了一个jsfiddle，它是关于如何使用jQuery和keypressfunction以及哪个属性的示例: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();
        }
    });
});

#2

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

#3

Well, supposing you were using jquery it would be a simple listener on your input field:

假设你在使用jquery，它会是你输入字段的一个简单的监听器:

In your footer before </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都不存在，那么可以更新您的问题，将其排除在外。

#4

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

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.

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

#5

-2

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.

使用而不是。那么你就有更好的机会。在textarea中，命中输入应该意味着文本的断行，而不是文本的提交。</p>

#1