如何进行“输入"输入文本区域提交表格 [英] How to make "Enter" key in a textarea submit a form

问题描述

我有一个聊天原因很明显，该聊天使用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>

非常感谢您的宝贵时间.

解决方案

我创建了一个jsfiddle，其中包含有关如何使用jQuery和keypress function和which属性的示例:

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.

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.

解决方案

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/

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

这篇关于如何进行“输入"输入文本区域提交表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！