使用 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 (keycode 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，就意味着“enter”命令被发送到第一个输入字段，导致焦点跳转到第二个输入字段。

接下来我尝试将其绑定到keyup，并且“价格”类的输入中的“输入”现在触发了createOnEnter，导致在不允许用户在文本区域中输入任何内容的情况下创建项目。

总结：

keypress = 用.val('') 清除后文本区域中的额外换行符

keydown = enter event nextFieldOnEnter on input with class "name" 被触发并且焦点被赋予类 "price" 的输入

keyup = 从价格输入事件正在触发绑定到文本区域的createOnEnter。

任何人都知道如何清除 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();
          };
        }