javascript - 重点关注回车机无法正常工作

Question

我的 UI 上有一些输入字段和一个 HTML 表格来输入一些数据，我的 HTML 表格在我的 HTML 表格中有一些输入字段并进行了一些计算，所有这些都工作正常

我正在做的是:

• 我的表格中有一些输入字段，所以当我按下选项卡时，我会关注下一个输入字段
• 现在在按下 tab 后，这里有最后一个输入字段，它是 Disc% 我正在创建新行(聚焦)，但这不是一个好的用户界面，因为每当我在 Disc% 字段外单击时，它都会创建不正确的新行

我想做的是:

• 在 disc% 之后，当我按下 enter 键时，我想创建一个新行，这样对用户有好处
• 我已经尝试这样做，但它无法正常工作，因为当我到达 Disc% 并按 Enter 时它什么也没做，当我集中注意力并再次回到 Disc% 然后按 enter 然后它创建新行但是按一次它显示三次，我不知道出了什么问题

请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 字段是 autoComplete 并且在创建新行时我希望它的行为与上述类似。

Answer 1

您需要做的是将 keypress 函数移出您拥有的 focusout 函数。 JSFiddle

因为您正在检查他们是否在 focus out 函数中按下了 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 来创建新行。

此外，考虑对总行进行样式设置，使其看起来像是表格的一部分，这样用户就会知道数字与什么匹配。