jQuery to submit textarea with enter key

Question

I have this simple sctipt

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(function(){
         $("#message").keypress(function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13){
                  $("#query").submit();
            }
          });
    });
</script>

and this html:

<div id="textarea">
    <form name="query" class="form1" id="query" action="query.py" method="post">
        <textarea rows="2" name="message" id="message" class="message" placeholder="RM911 Chat" cols="26"></textarea>
        <input type="submit" id="submit" name="submit1" value="a"/>
    </form>
</div>

if input's id is "submit" nothing works, if it's id is something else - it works... But the whole project uses "submit" id for submit buttons, and I don't want to rename it (because of CSS). Is there anything I can do?

If jQuery standardizes the event, why did you bother with checking for `e.keyCode`. — Nahydrin, Nov 06 '13 at 04:59
It is my very first time trying to use jQuery. I really do suck at it ) — Anarion, Nov 06 '13 at 05:00

score 12 · Accepted Answer · edited Dec 25 '18 at 04:20

12

Try this, in your script,

$("#submit").trigger('click');

Full Code,

$(function () {
    $("#message").keypress(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        //alert(code);
        if (code == 13) {
            $("#submit").trigger('click');
            return true;
        }
    });
});

Demo

edited Dec 25 '18 at 04:20

Hary

5,690
7
42
79

answered Nov 06 '13 at 05:01

Rohan Kumar

40,431
11
76
106

What if I want to add a new line with ctrl+enter? – Anarion Nov 06 '13 at 05:03
1

yes you can by changing the condition like, `if (!e.ctrlKey && code == 13) ` see http://jsfiddle.net/JLevJ/1/ – Rohan Kumar Nov 06 '13 at 05:08
1

Simply doing that will not let him create a new line. – Nahydrin Nov 06 '13 at 05:10

Nahydrin · Answer 2 · 2018-11-29T19:57:17.087

Here you go, this submits the form (by triggering the submit button) when the enter key is pressed; and lets you create a new line when you hold Control and press Enter.

$(function(){
    function getCaret(el) {
        if (el.selectionStart) {
            return el.selectionStart;
        } else if (document.selection) {
            el.focus();

            var r = document.selection.createRange();
            if (r == null) {
                return 0;
            }

            var re = el.createTextRange(),
                rc = re.duplicate();
            re.moveToBookmark(r.getBookmark());
            rc.setEndPoint('EndToStart', re);

            return rc.text.length;
        }  
        return 0;
    }
    $("#message").keyup(function(e){
        if ((e.keyCode == 13 || e.keyCode == 10) && e.ctrlKey) {
            var content = $(this).val();
            var caret = getCaret(this);
            $(this).val(content.substring(0,caret)+
                        "\n"+content.substring(caret,content.length));
            e.stopPropagation();
        } else if (e.keyCode == 13 || e.keyCode == 10){
            $("#submit").click();
        }
    });
});

Here's a Demo

Credit to TheSuperTramp for the getCaret and original keyup code for the Ctrl+Enter solution.

It could be that Ctrl+Return is keyCode 10, see this page on the Chromium bug tracker https://bugs.chromium.org/p/chromium/issues/detail?id=79407 — Mandy Schoep, Nov 29 '18 at 08:22
@MandyS updated my question to reflect the different behaviour across windows and Linux. — Nahydrin, Nov 29 '18 at 19:57

jQuery to submit textarea with enter key

2 Answers2

Linked