Как удалить дополнительную новую строку в textarea после очистки его с помощью JQuery .val () - PullRequest
Новая
       17

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

10 голосов
/ 29 ноября 2010

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

<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) в последнем поле ввода, которое является текстовой областью, я получаю форму создания элемента в базе данных, очищаю значения трех полей ввода и снова фокусируюсь на первом поле ввода, чтобы подготовиться к введите другой элемент. Вот функция, которая связана «нажатием клавиши» с текстовой областью с классом «описание». 

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

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

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

Затем я попытался привязать его к «keyup», и «enter» на входе класса «price» теперь вызывает createOnEnter, вызывая создание элемента, не позволяя пользователю вводить что-либо в текстовой области.

Резюме:

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

keydown = ввод события «nextFieldOnEnter» при вводе с классом «имя» срабатывает, и фокус вводится при вводе с классом «цена»

keyup = событие ввода от цены вызывает «createOnEnter», привязанный к текстовой области.

У кого-нибудь есть идеи, как я могу очистить текстовую область без этих проблем, потому что я собираю клавишу «ввод» для перемещения полей и сохранения элемента?

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

1 Ответ

18 голосов
/ 29 ноября 2010

Поведение по умолчанию клавиши Enter в textarea заключается в добавлении новой строки.Необходимо предотвратить это действие в методе createOnEnter, добавьте e.preventDefault(); после сопоставления нажатия клавиши в качестве клавиши ввода. 

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