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

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 2

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.