Submit value on pressing Enter in textarea and pressing Shift+Enter should go to next line

Question

I want to have a chat box (textarea) where if user press Enter then it should submit the chat, and if user press Shift+Enter then it should enter in a new line.

I tried something but not able to figure out the exact keyup or keydown thing. The code I'm using at the moment is:

$("textarea").keydown(function(e){
    if (e.keyCode == 13 && !e.shiftKey)
    {
        e.preventDefault();
    }
});

jsFiddle

Also I want to get the \n in place when Enter+Shift key is pressed.

EDIT

Issue with my code is:-

When i am check the content on client using using alert then it shows the next line. But when i am posting it my rails back end. Then its just a simple string. No new line thing is there.

This is how i am sending chats to rails server.

  $.post("/incomingchat", { body:$("#chat_" + group_id).val() },
   function(data){
        // do something..
    });

Please don't **just** link to jsfiddle; always include the code in the question as well. — Matt, Sep 08 '11 at 08:12
What's wrong with the code you posted? To me it works just as you described? http://jsfiddle.net/Su5ts/25/ — ChrisR, Sep 08 '11 at 08:18

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

I've answered this before. It's a little tricky if the caret is not at the end of the textarea:

How do I detect "shift+enter" and generate a new line in Textarea?

edited May 23 '17 at 11:51

Community

1
1

answered Sep 08 '11 at 08:17

Tim Down

318,141
75
454
536

The issue is when i m posting this data using Jquery to my backend server. How can i identity the enter+shift key? at back end its same as without enter+shift key – Mohit Jain Sep 08 '11 at 08:42
@Mohit: I don't understand. The value of the textarea after pressing shift+enter will contain a line break and this line break will definitely be submitted to the server when you post. – Tim Down Sep 08 '11 at 09:55
@TimDown: I have a related question. In Chrome, if I handle keypress event when enter key is pressed by adding new line character '\n', and if the textarea is scrollable, the scrollbar won't work, I mean if I press enter key, textarea doesn't scroll when I type. Do you have any idea for this problem? – Jack Cood Sep 22 '14 at 03:03

score 3 · Answer 2 · edited Aug 01 '12 at 10:59

3

$("textarea").keydown(function(e)
{
    if (e.keyCode == 13)
    {
        if (e.shiftKey) {
            $(this).val( $(this).val() + "\n" );
        }
        else {
            submitTheChat();
        }
    }
});

edited Aug 01 '12 at 10:59

Nikola K.

7,093
13
31
39

answered Sep 08 '11 at 08:18

AndreyKo

901
7
16

The issue is when i m posting this data using Jquery to my backend server. How can i identity the enter+shift key? at back end its same as without enter+shift key – Mohit Jain Sep 08 '11 at 08:43

pedrodg · Answer 3 · 2011-09-08T08:43:29.703

1

Consider using the keypress event instead. If you run the code in jsfiddle, you'll see that a new line is not added when you press enter.

$("textarea").keypress(function(e){
    if (e.keyCode == 13 && !e.shiftKey)
    {        
        e.preventDefault();
        //now call the code to submit your form
        alert("just enter was pressed");
        return;
    }

    if (e.keyCode == 13 && e.shiftKey)
    {       
        //this is the shift+enter right now it does go to a new line
        alert("shift+enter was pressed");        
    }    
});

edited Sep 08 '11 at 08:43

answered Sep 08 '11 at 08:24

pedrodg

115
2
10

The issue is when i m posting this data using Jquery to my backend server. How can i identity the enter+shift key? at back end its same as without enter+shift key – Mohit Jain Sep 08 '11 at 08:41
Ok I see. In that case I suggest looking at Tim Down's response that he has posted above. – pedrodg Sep 08 '11 at 09:02

Submit value on pressing Enter in textarea and pressing Shift+Enter should go to next line

3 Answers3

Linked

Related