Сосредоточиться на ввод пресс не работает должным образом

Question

У меня есть несколько полей ввода и таблица HTML в моем пользовательском интерфейсе для ввода некоторых данных, в моей таблице HTML есть поле ввода внутри моей таблицы HTML, и я выполняю некоторые вычисления, а также все, что работает нормально

Что яделает:

• У меня есть несколько полей ввода внутри моей таблицы, поэтому, когда я нажимаю на вкладке, я фокусирую одно следующее поле ввода
• Теперь есть последнее поле ввода, которое Disc%здесь после нажатия tab я создаю новую строку (в фокусе), но это не очень хороший пользовательский интерфейс, потому что всякий раз, когда я щелкаю за пределами поля Disc%, создается новая строка, которая не является правильной

Я пытаюсь сделать следующее:

• После disc%, когда я нажимаю клавишу ввода, я хочу создать новую строку, чтобы она была полезна для пользователя
• Iпытался сделать это, но он не работает должным образом, так как когда я достигаю Disc% и нажимаю ввод, он ничего не делает, а когда я фокусируюсь и снова возвращаюсь к 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

Что вам нужно сделать, это переместить функцию нажатия клавиш из имеющейся у вас функции фокусировки. JSFiddle

Поскольку вы проверяете, нажали ли они клавишу ввода, внутри функции фокусировки, она не ведет себя так, как вы ожидаете.

После перемещения его за пределы этой функции он ведет себя как ожидалось, предупреждение срабатывает только один раз, и строка создается, даже если фокус все еще находится внутри элемента ввода.

$(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создать новую строку ".Также может быть полезно добавить кнопку для добавления строки и, возможно, небольшой элемент, который раскрывает дополнительную информацию о наведении, объясняющую, что они могут использовать ввод для создания новой строки.

Кроме того, рассмотрите стиль всей строки.чтобы он выглядел отдельно от таблицы, таким образом, пользователь знал бы, с какими числами совпадают.