(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()第二个和所有其他项目的主导换行符,但这意味着用户仍然会在每一个附加项目的第二行显示插入点.