Question

我的UI上有一些输入字段和一个HTML表来输入一些数据，HTML表中的HTML表中有一些输入字段，并且进行一些计算也都可以正常工作

我正在做的是：

我的表中有一些输入字段，所以当我按下选项卡时，我将聚焦于下一个输入字段
现在按Disc%后，这里是最后一个输入字段，tab是我正在创建新行（焦点对准），但这不是一个好的用户界面，因为每当我在{ {1}}字段正在创建不正确的新行

我想做的是：

在Disc%后，按Enter键后，我想创建一个新行，以便对用户有利。
我已尝试执行此操作，但是它无法正常工作，因为当我到达disc%并按Enter时，它什么也没有做；当我集中注意力并再次回到Disc%并按Enter时，它会创建新行，但按一次则显示3次，我不知道怎么了

请check my Fiddle，因为我有很多计算，这就是为什么代码有点长的原因，但是我已经在问题所在的行中注释了

当目标匹配光盘％时，我正在执行以下操作
```
Disc%
```

我这样做的方式类似于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，并且在创建新行时，我希望它的行为与上面相同。

Answer 1

您需要做的是将按键功能移出现有的对焦功能。 JSFiddle

因为要检查他们是否已按下聚焦功能内的Enter键，所以它的行为不符合您的预期。

将其移出该函数之外后，其行为将与预期的一样，警报仅触发一次，并且即使焦点仍在输入元素内，也会创建该行。

$(document).on('focusout', (e) => {
  const row = e.target.parentElement.parentElement
  if (e.target.matches("[name=itemNametd]")) {  // whene focus is out from itemNametd
    getValues(e.target.parentElement.parentElement)

  }

  if (e.target.matches('[name=unitQtytd]')) { //when focus is out from unitQty
    calc(e.target.parentElement.parentElement)

  }

});

// Move this outside of the above focusout function, 
// you will also need to rename all of the e elements to event, 
// or the other way around. Also include line where you declare the row variable
$(document).keypress(function(event) {
	const row = event.target.parentElement.parentElement
      var keycode = event.keyCode || event.which;
      if (keycode == '13') {
        alert("presed")
        calcDiscount(event.target.parentElement.parentElement)
        if ($(row).parent().find('tr').length - $(row).index() === 1) {
          rowappend(event.target.parentElement.parentElement.parentElement)

        }
      }

    });

与问题无关（因为您在谈论用户体验）：

要记住的一件事是“用户将如何知道按Enter创建新行”。最好还包括一个添加行的按钮，以及一个小元素，它可以显示有关悬停的更多信息，从而说明他们可以使用enter来换行。

此外，考虑对整个行进行样式设置，使其看起来像是表格的一部分，这样用户将知道数字匹配的数字。

专注于Enter键无法正常工作

1 个答案: