Triggering the enter in a textarea

Question

I noticed the new Facebook way of sending comments on status. Basically when you write your comment you have no buttons to click but the "enter" key to press in order to submit the comment. Now I'd like to make this thing too. And I was thinking about the possible solutions. It comes to my mind that <input> are submitted with the enter button pressed, but that textarea are not.

Either I write an input (type text) and set an height witch covers more than a row
Or I have to add a textarea and somehow submit that form when the user press enter.

Which is the best? And if the answer = second, how could I do that?

score 9 · Accepted Answer · answered Mar 18 '11 at 13:35

It depends how you define best.

The first is best if you want a really easy solution that doesn't require javascript

The seconds is best if you wish to allow linebreaks in the text.

If you wish to use the text area solution you can do something like this: (uses jQuery)

<textarea id="mytextarea"></textarea>
<script>
$('#mytextarea').keypress(function(e){
  if(e.keyCode == 13 && !e.shiftKey) {
   e.preventDefault();
   this.form.submit();
  }
});
</script>

The good thing about this solution is that it still allows people to do linebreaks, if they just hold in the shift key when they hit enter. Just like on skype.

Live example here: http://jsfiddle.net/MEtGg/

Shaz · Answer 2 · 2011-03-18T13:43:46.230

No need for a framework (such as jQuery) just for this:

var textarea = document.getElementById("area");

try {
    textarea.addEventListener("keydown", keyPress, false);
} catch (e) {
    textarea.attachEvent("onkeydown", keyPress);
}

function keyPress(e) {
    if (e.keyCode === 13) {
        alert("Enter key was pressed")
    } else {
        return;
    }
}

Take a look at an example here: http://fiddle.jshell.net/yuCAd/3/

score 0 · Answer 3 · answered Mar 18 '11 at 13:35

0

I'd register a key listener on the enter key when the focus is in your textarea, that's the most common and best way imo.

in jquery you can use the keydown/up method

answered Mar 18 '11 at 13:35

ChrisR

14,370
16
70
107

score 0 · Answer 4 · edited May 23 '17 at 11:47

0

I would go with the second. And will use javascript to intercept the enter key and then call a function to do the submit. This answer should do the case: Trigger a button click with JavaScript on the Enter key in a text box

edited May 23 '17 at 11:47

Community

1
1

answered Mar 18 '11 at 13:37

Iridio

9,213
4
49
71

Triggering the enter in a textarea

4 Answers4