使用JQuery清除后,如何删除textarea中的额外换行符.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")字段.当用户在最后一个输入字段(即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中输入任何内容.

摘要:

keypress =在用.val('')清除后用textarea中的额外换行符

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

keyup =从price输入事件触发绑定到textarea的"createOnEnter".

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

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

Answer 1

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

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