Question

This is meant to allow a user to type in a message and then press enter to send it. This should clear the box so that the user can type in a new message. The problem is that the standard result of pressing enter (creation of a newline) is occurring after the .empty() event….so the text vanishes and is replaced by a newline, which is quite undesirable. How can I circumvent this?

  $('#messagebox').keypress(function(event) {
        if (event.keyCode == '13') {
            send();
            $('#messagebox').empty();
        }
    }); 

Answer 1

You can prevent the default action of the keypress via event.preventDefault() (or return false from your event handler function, which is jQuery shorthand for preventDefault + stopPropagation):

Live example | source:

HTML:

<p>Pressing Enter will clear the text area below:</p>
<textarea id="messagebox" rows="10" cols="50"></textarea>

JavaScript:

jQuery(function($) {

  $("#messagebox").focus().keypress(function(event) {
    if (event.keyCode === 13) {
      $(this).val("");
      event.preventDefault();
    }
  });

});

---

FWIW, I’d probably use val with an empty string rather than empty to clear the textarea, since val is specifically for setting the value of form fields — but if empty() is working for you…