javascript - 使用 JQuery .val() 清除文本区域后如何删除多余的换行符

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”绑定(bind)到类“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 显示为空，但实际上现在包含换行符。这意味着当用户为第二个和所有 future 项目再次到达文本区域时，插入点位于文本区域的第二行而不是第一行，并且当用户单击 enter 进行保存时那些额外的项目，它们被保存为一个前导换行符。

我发现发生这种情况是因为我正在捕获 enter 键并且 enter 键不仅触发了我的 if 语句，而且在 if 之后添加了换行符语句执行。我想出这个是因为我尝试绑定(bind)到 keydown 并且下一次围绕 textarea 没有那个额外的空间，但是这引入了另一个问题。现在它绑定(bind)到 keydown，这意味着“enter”命令被发送到第一个输入字段，导致焦点跳转到第二个输入字段。

接下来我尝试将它绑定(bind)到 keyup 并且类“price”输入中的“enter”现在触发了 createOnEnter 导致创建项目时没有允许用户在文本区域中输入任何内容。

总结:

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

keydown = enter 事件 nextFieldOnEnter 在类“name”的输入上被触发，焦点被给予类“price”的输入

keyup = 来自价格的输入事件正在触发绑定(bind)到文本区域的 createOnEnter。

任何人都知道如何在没有这些问题的情况下清除文本区域，因为我正在捕获“输入”键以推进字段并保存项目？

我知道我可以 .remove() 在保存之前为第二个和所有其他项目添加前导换行符，但这意味着用户仍然会在第二行看到插入点每增加一项。

Answer 1

textarea 中 Enter 键的默认行为是添加一个新行。您需要在 createOnEnter 方法中阻止此操作发生，在匹配按键作为 Enter 键后添加 e.preventDefault();。

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