javascript – 如何在使用JQuery .val()清除textarea之后,删除额外的换行符

前端之家收集整理的这篇文章主要介绍了javascript – 如何在使用JQuery .val()清除textarea之后,删除额外的换行符前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个快速产品进入的表格.
(FYI,我有表格设置表,所以我可以对齐每个输入的标签.)
<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”的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();
  };
},

我遇到的问题是,当用户首次加载页面时,文本区域为空,但是在用户进入第一个项目之后,按enter键,文本区域将显示为空,但实际上现在包含换行符.这意味着当用户再次访问第二个和所有未来项目的文本区域时,插入点位于文本区域的第二行而不是第一行,当用户单击输入以保存这些附加项目时,它们将被保存带着一个领先的换行字符.

我发现这是因为我正在捕获“输入”键,而输入的键不仅触发了我的if语句,而且在if语句执行之后添加了这个换行符.我想出了这一点,因为我试图绑定到“keydown”,而下一次在textarea没有额外的空间,但这又引起了另一个问题.现在它被绑定到“keydown”,这意味着“enter”命令被发送到第一个输入字段,导致焦点跳到第二个输入字段.

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

概要:

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

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

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

任何人都有任何想法,如何清除textarea没有这些问题,因为我正在捕获“输入”键提前字段和保存项目?

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

解决方法

文本区域中的Enter键的默认行为是添加新行.您需要防止在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();
          };
        }

猜你在找的jQuery相关文章