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”）字段。当用户在最后一个输入字段（即textarea）中单击enter（键代码13）时，我将表单在数据库中创建项目，清除三个输入字段的值并再次将焦点放在第一个输入字段上以准备输入另一个项目。这是通过“keypress”绑定到带有“description”类的textarea的函数。

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为空，但是在用户输入第一个项目并按下输入后，textarea显示为空，但实际上现在包含换行符。这意味着当用户再次访问textarea以获取第二个和所有将来的项目时，插入点将位于textarea的第二行而不是第一行，当用户单击enter以保存这些其他项目时，它们将被保存带有领先的换行符。

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

接下来我尝试将它绑定到“keyup”，“price”类输入中的“enter”现在触发createOnEnter，导致创建项目而不允许用户在textarea中输入任何内容。

摘要：

使用.val（''）

清除后，

keypress = textarea中的额外换行符

keydown =输入事件“nextFieldOnEnter”对输入的类“name”被触发并且焦点被赋予输入类“price”

keyup =从价格输入事件触发绑定到textarea的“createOnEnter”。

任何人对如何在没有这些问题的情况下清除textarea有任何想法，因为我正在捕获“输入”键以提前字段并保存项目？

我知道我可以在保存之前删除第二个和所有其他项目的前导换行符，但这意味着每个附加项目的用户仍然会在第二行显示插入点。

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

用JQuery清除后，如何删除textarea中的额外换行符.val（）

1 个答案: