jquery 重点关注输入压力机工作不正常

polhcujo  于 2023-05-06  发布在  jQuery
关注(0)|答案(2)|浏览(122)

我有一些输入字段和一个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,并且在创建新行时,我希望它的行为与上面一样。

xyhw6mcr

xyhw6mcr1#

你需要做的是把按键功能从你拥有的focusout功能中移出来。JSFiddle
因为您正在检查他们是否在focusout函数中按下了enter,所以它的行为与您预期的不同。
将其移出该函数后,它的行为与预期一致,警报只触发一次,即使焦点仍在input元素内,也会创建该行。

$(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来创建新行。
另外,考虑将总计行样式化,使其看起来像是表的一部分,这样用户就可以知道数字匹配到什么。

h43kikqp

h43kikqp2#

你要做的就是:

const ctrl = document.getElementById("my-ctrl");
ctrl.addEventListener('keypress', function(e) {
    if (e.keyCode == 13) {
        ctrl.blur();
     }
});

...这将在提交表单之前触发ctrlfocusout事件。

相关问题