使用 JQuery .val() 清除 textarea 中的額外換行符后如何刪除它

Question

我有一個快速輸入產品的表格。 （僅供參考，我的表格設置了表格，因此我可以正確對齊每個輸入的標簽。）

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

我已經設置好了，當在第一個輸入字段中按下tab或enter時，它會將用戶移動到下一個$(":input")字段。 當用戶在最后一個輸入字段（文本區域）中單擊Enter （鍵碼 13）時，我讓表單在數據庫中創建項目，清除三個輸入字段的值並將焦點再次放在第一個輸入字段上以准備輸入另一個項目。 這是通過“keypress”綁定到具有“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();
  };
},

我遇到的問題是，當用戶第一次加載頁面時，textarea 是空的，但是在用戶輸入第一項並按下 enter 后，textarea 出現空，但實際上現在包含一個換行符。 這意味着當用戶再次訪問第二個和所有未來項目的 textarea 時，插入點位於 textarea 的第二行而不是第一行，當用戶單擊enter以保存這些附加項目時，它們將被保存帶有前導換行符。

我發現這是因為我正在捕獲enter鍵並且該enter鍵不僅觸發了我的 if 語句，而且在 if 語句執行后添加了該換行符。 我想通了這一點，因為我嘗試綁定到keydown並且下次在 textarea 周圍沒有額外的空間，但是這引入了另一個問題。 現在它綁定到keydown意味着“輸入”命令正在發送到第一個輸入字段，導致焦點跳轉到第二個輸入字段。

接下來，我嘗試將它綁定到keyup並且“price”類的輸入中的“enter”現在正在觸發createOnEnter導致創建該項目，而不允許用戶在 textarea 中輸入任何內容。

概括：

keypress =額外的換行符在文本區域與清算之后.val('')

keydown = enter event nextFieldOnEnter on input 類“name”被觸發，焦點被賦予類“price”的輸入

keyup = 從價格輸入事件觸發createOnEnter綁定到 textarea。

任何人都對如何清除 textarea 沒有這些問題有任何想法，因為我正在捕獲“輸入”鍵以推進字段並保存項目？

我知道我可以.remove()在保存之前為第二個和所有附加項目的前導換行符，但這意味着用戶仍然會在第二行為每個附加項目顯示插入點。

Answer 1

textarea Enter 鍵的默認行為是添加新行。 您需要防止在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();
          };
        }