Javascript 将焦点放在回车键不能正常工作上

我在UI上有一些输入字段和一个HTML表来输入一些数据，我的HTML表在HTML表中有一些输入字段，并且做一些计算，所有这些都很好

我正在做的是：

• 我的表格中有一些输入字段，所以当我按下tab键时，我会聚焦下一个输入字段
• 现在有最后一个输入字段是

  Disc%

  ，在按下

  tab

  后，我正在创建新行（在调出焦点时），但这不是一个好的用户界面，因为每当我在

  Disc%

  字段外单击时，它都会装入不正确的新行

我想做的是：

• 在

  disc%

  之后，当我按enter键时，我想创建一个新行，这样对用户有好处
• 我尝试过这样做，但它不能正常工作，因为当我到达

  Disc%

  并按enter键时，它不起任何作用；当我将注意力集中到

  Disc%

  并再次返回到

  Disc%

  并按enter键时，它会创建新行，但按一次它会显示三次，我不知道是怎么回事

请，因为我有这么多的计算，这就是为什么代码有点长，但我已经评论了问题所在的行

• 当目标与光盘%1匹配时，我的操作如下

  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

，当创建新行时，我希望它的行为与上面一样。

您需要做的是将按键功能移出您拥有的focusout函数

因为您正在检查他们是否在focus out函数中按了enter键，所以它的行为与您预期的不一样

将其移出该函数后，其行为符合预期，警报仅触发一次，即使焦点仍在输入元素内，也会创建该行

$（document）.on（'focusout'，（e）=>{
常量行=e.target.parentElement.parentElement
如果（e.target.matches（“[name=itemNametd]”）{//当焦点从itemNametd中移出时
getValues（e.target.parentElement.parentElement）
}
如果（e.target.matches（'[name=unitQtytd]'）{//当焦点从unitQty移出时
计算（如target.parentElement.parentElement）
}
});
//将其移到上述focusout函数之外，
//您还需要将所有e元素重命名为event，
//或者反过来。也包括声明行变量的行
$（文档）.按键（功能（事件）{
常量行=event.target.parentElement.parentElement
var keycode=event.keycode | | event.which；
如果（键代码=='13'）{
警报（“呈现”）
calcDiscount（event.target.parentElement.parentElement）
if（$（行）.parent（）.find（'tr'）.length-$（行）.index（）==1）{
rowappend（event.target.parentElement.parentElement.parentElement）
}
}
})

嘿，我之所以在该函数中包含该代码是有原因的，因为当我从

Disc%

集中注意力时，我正在创建一个新行，在您的回答中，当在

Disc%

之后按enter键时，新行没有追加。我已经在原始代码中设置了该总行的样式，对于该回车键，我还考虑添加一个加号ButtonOry@manishthakur在粘贴链接之前，我一定没有保存JSFIDLE。现在试试。是的，现在它工作得很好，你知道我在做什么，我只是想得到一些指导，我做得对吗？我将创建一个加号按钮来创建新行，或者可以在我的页面上有一个小信息来创建新行，按enter键t不知道我的方法是否正确？是的，添加一个加号按钮会很好，可能会将其添加到表格的最后一行旁边，就像我添加了很多行一样，然后我不想向上滚动到顶部添加您知道的行？否则，可能会出现表格下方的一些文本，如您所说，显示

按enter键创建新行。