我有一些输入字段和一个HTML表在我的UI输入一些数据,我的HTML表有一些输入字段在我的HTML表和做一些计算也都工作正常
我正在做的是:
- 我有一些输入领域内我的表,所以当我按下标签我的重点是一个下一个输入领域
- 现在有最后一个输入字段是
Disc%
在这里按下tab
后,我正在创建新行(在焦点输出),但这不是一个好的用户界面,因为每当我在Disc%
字段外单击时,它正在创建新行,这是不正确的
我想做的是:
- 在
disc%
之后,当我按Enter键时,我想创建一个新行,以便对用户有好处 - 我试过这样做,但它是不正确的工作,当我达到
Disc%
和按回车键,它什么也不做,当我集中出来,并再次回到Disc%
和按回车键,然后它创建新的行,但在一次按下它显示三次,我不知道是什么问题
请check my Fiddle,因为我有这么多的计算,这就是为什么代码有点长,但我已经注解了问题所在的行
- 当目标与光盘%匹配时,我正在执行以下操作
if (e.target.matches('[name=discPercentagetd]')) {
$(document).keypress(function(event) { // here I am trying to create new row when enter is clicked
var keycode = event.keyCode || event.which;
if (keycode == '13') {
alert("presed")
calcDiscount(e.target.parentElement.parentElement)
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(e.target.parentElement.parentElement.parentElement)
}
}
});
}
我像$(document).on('focusout', (e) => {
这样做,因为我的表中的ItemName
字段是autoComplete
,并且在创建新行时,我希望它的行为与上面一样。
2条答案
按热度按时间xyhw6mcr1#
你需要做的是把按键功能从你拥有的focusout功能中移出来。JSFiddle
因为您正在检查他们是否在focusout函数中按下了enter,所以它的行为与您预期的不同。
将其移出该函数后,它的行为与预期一致,警报只触发一次,即使焦点仍在input元素内,也会创建该行。
与问题无关(因为您正在谈论用户体验):
要记住的一件事是“用户如何知道按回车键来创建新行”。最好还包括一个按钮来添加一行,也许还包括一个小元素来揭示悬停的更多信息,解释他们可以使用enter来创建新行。
另外,考虑将总计行样式化,使其看起来像是表的一部分,这样用户就可以知道数字匹配到什么。
h43kikqp2#
你要做的就是:
...这将在提交表单之前触发
ctrl
的focusout
事件。