Как удалить дополнительную строку новой строки в textarea после ее очистки с помощью JQuery.val()

У меня есть форма для быстрого ввода продукта. (FYI, у меня есть форма, установленная с таблицами, поэтому я могу правильно выровнять метки для каждого входа.)

<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>

Я настроил его так, чтобы при нажатии вкладки или ввода в первом для ввода полей он перемещает пользователя в следующее поле $( ": input" ). Когда пользователь нажимает кнопку ввода (код ключа 13) в последнем поле ввода, которое является текстовым полем, у меня есть форма, создающая элемент в базе данных, очищающие значения трех полей ввода и снова помещающие фокус на первое поле ввода в процессе подготовки к введите другой элемент. Вот функция, которая связана с помощью нажатия клавиши "keypress" в текстовое поле с описанием класса.

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();
  };
},

Проблема заключается в том, что когда пользователь сначала загружает страницу, текстовая область пуста, но после того, как пользователь входит в первый элемент и нажимает клавишу ввода, поле textarea становится пустым, но на самом деле теперь содержит символ новой строки. Это означает, что когда пользователь снова получает текстовое поле для второго и всех будущих элементов, точка ввода находится во второй строке текстовой области вместо первой, и когда пользователь нажимает кнопку ввода для сохранения этих дополнительных элементов, они сохраняются с ведущим символом новой строки.

Я понял, что это происходит, потому что я захватываю ключ "enter", и ключ ввода не только запускает мой оператор if, но и добавляет, что новая строка после выполнения оператора if. Я понял это, потому что я пытался привязать к "keydown", и в следующий раз вокруг textarea не было такого дополнительного места, однако это породило еще одну проблему. Теперь, когда он привязан к "keydown", это означает, что команда "enter" отправляется в первое поле ввода, заставляя фокус переходить во второе поле ввода.

Далее я попытался привязать его к "keyup", а "enter" во входной строке класса "цена" теперь запускает createOnEnter, вызывая создание элемента, не позволяя пользователю вводить что-либо в текстовое поле.

Резюме:

keypress = дополнительная новая строка в textarea после ее очистки с помощью .val('')

keydown = ввести событие "nextFieldOnEnter" на входе с классом "имя", и фокус задается для ввода с классом "цена"

keyup = ввести событие из цены запускает "createOnEnter", привязанный к текстовому полю.

У кого-нибудь есть идеи о том, как я могу очистить текстовое поле без этих проблем, потому что я захватываю ключ "enter" для продвижения полей и сохранения элемента?

Я знаю, что перед сохранением я мог бы сделать .remove() ведущую новую строку для второго и всех дополнительных элементов, однако это означает, что пользователю все равно будет отображаться точка вставки во второй строке для каждого дополнительного элемента.

Ответ 1