Submitting data from textarea by hitting "Enter".

Question

I have dynamic web page with JS. There is a textarea and a Send button, but no form tags. How do I make Submit button fire and the textarea get cleared when Enter is pressed in the textarea?

Answer 1

Hitting Enter in a textarea inserts a line break, rather than submitting the parent form; this would't work in that fashion even with regular form tags.

It would be inadvisable to attempt to work around this behaviour, as it would violate the user's expectation of how text area controls behave, both in other web sites, and in other applications on their platform.

Answer 2

You could use an keyup handler for the textarea (although I would advise against it*).

[SomeTextarea].onkeyup = function(e){
  e = e || event;
  if (e.keyCode === 13) {
    // start your submit function
  }
  return true;
 }

*Why not use a text input field for this? Textarea is escpecially suited for multiline input, a text input field for single line input. With an enter handler you criple the multiline input. I remember using it once for a XHR (aka AJAX) chat application (so the textarea behaved like an MSN input area), but re-enabled multiline input using the CTRL-enter key for new lines. May be that's an idea for you? The listener would be extended like this:

[SomeTextarea].onkeyup = function(e){
  e = e || event;
  if (e.keyCode === 13 && !e.ctrlKey) {
    // start your submit function
  }
  return true;
 }

Answer 3

Here's my solution:

In Javascript:

function isEnterPressed(e){
var keycode=null;
if (e!=null){
 if (window.event!=undefined){
  if (window.event.keyCode) keycode = window.event.keyCode;
  else if (window.event.charCode) keycode = window.event.charCode;
 }else{
  keycode = e.keyCode;
 }
}
return (keycode == 13);}

In html:

<input type="text" onkeyup="if(isEnterPressed(event)){/*do something*/}" />

Answer 4

Shog9 suggested i copy my answer to a duplicated version of this question: One issue this ignores is users running input method (editors) -- eg. non-latin text entry. The IME i am familiar with is the Kotoeri Hiragana IM on OSX, but there are numerous others both for japanese (Kotoeri alone has multiple different input modes, and there's at least one other major one called ATOK), in addition to modes for hangul, traditional and simplified chinese, as well as numerous other less well known languages. And these input methods exist on all major platforms (esp. Win, Mac, and Linux).

The problem that they introduce from the point of view of code similar to what you're attempting is that the exact physical keypresses does not necessarily correspond to the actual input that the user is entering.

For example typing the sequence of characters toukyou<enter> under hiragana by default will produce the string とうきょう, note that there is no <enter> in the resultant text because enter confirms the composed text. But in addition to this the actual sequence of characters that appears changes as the input is typed:

t // t
と // to
とう // tou
とうk // touk
とうky // touky
とうきょ // toukyo
とうきょう // toukyou

If memory serves when i implemented this in webkit it was necessary to make the keyCode be 229 on keyDown for all keys typed in an IME (for compat with IE) -- but i cannot recall what the behaviour of keyUp is.

It's also worth noting that in some IMEs you won't necessarily receive keydowns, keypress, or keyup. Or you will receive multiple. Or they're all sent together at the end of input.

In general this is a very... unclean... portion of the DOM event implementations currently.

Answer 5

The textarea is for allowing users to enter multiple lines of text so, pressing enter would only insert a new line in the text. Use normal text field instead if you want that behavior