Question

I have a form for quick product entry.
(FYI, I have the form set with tables so I can right align the labels for each input.)

<table id="create-item">
  <tbody>
    <tr>
      <th>
        <label for="name">Name</label>
      </th>
      <td>
        <input class="name" name="name" />
      </td>
    </tr>
    <tr>
      <th>
        <label for="price">Price</label>
      </th>
      <td>
        <input class="price" name="price" />
      </td>
    </tr>
    <tr>
      <th>
        <label for="description">description</label>
      </th>
      <td>
        <textarea class="description" name="description" rows="3" cols="50" />
      </td>
    </tr>
  </tbody>
</table>

I have it set up so that when tab or enter is pressed in the first to input fields, it moves the user to the next $(":input") field. When the user clicks enter (keycode 13) in the last input field which is a textarea, I have the form create the item in the database, clear the values of the three input fields and place focus on the first input field again in preparation to enter another item. Here is the function that is bound via "keypress" to the textarea with class "description".

nextFieldOnEnter: function(e) {
  var $that = $(e.currentTarget);
  if (e.keyCode == (13 || 9)) {
    $that
      .closest("tr")
        .next("tr")
          .find(":input")  
            .focus();
  };
},

createOnEnter: function(e) {
  if (e.keyCode == 13) {
    items.create(this.newAttributes());
    this.$("#create-item :input").val('');
    this.$("#create-item :input")[0].focus();
  };
},

The problem I have is that when the user first loads the page the textarea is empty, but after the user enters in the first item and presses enter the textarea appears empty, but in fact now contains a newline character. This means that when the user gets to the textarea again for the second and all future items, the insertion point is sitting in the second row of the textarea instead of the first and when the user clicks enter to save those additional items, they are saved with a leading newline character.

I figured out that this is happening because I am capturing the enter key and that enter key is not only triggering my if statement, but adding that newline after the if statement executes. I figured this out because I tried binding to keydown and the next time around the textarea did not have that extra space, however this introduced another problem. Now that it is bound to keydown it means that the "enter" command is being sent to the first input field, causing the focus to jump to the second input field.

Next I tried to bind it to keyup and the "enter" in the input of class "price" is now triggering the createOnEnter causing the item to be created without allowing the user to enter anything in the textarea.

Summary:

keypress = extra newline in textarea after clearing it with .val('')

keydown = enter event nextFieldOnEnter on input with class "name" is triggered and focus is given to input with class "price"

keyup = enter event from price is triggering createOnEnter bound to the textarea.

Anyone have any ideas on how I can clear the textarea without those problems because I am capturing the "enter" key to advance fields and save the item?

I know that I could .remove() the leading newline for the second and all additional items before saving, however this means that the user would still be presented with the insertion point on the second line for every additional item.

Answer 1

The default behaviour of the Enter key in a textarea is to add a new line. You need to prevent this action occurring within the createOnEnter method, add e.preventDefault(); after matching the key press as the Enter key.

createOnEnter: function(e) {
          if (e.keyCode == 13) {
            e.preventDefault();
            items.create(this.newAttributes());
            $("#create-item :input").val('');
            $("#create-item :input")[0].focus();
          };
        }