Focus out on enter press not working properly

Question

I have some input fields and a HTML table on my UI to input some data, my HTML table have some input field inside my HTML table and doing some calculations also all that are working fine

What I am doing is:

• I have some input fields inside my table so when I press on tab I am focusing one next input field
• now there is last input field which is Disc% here after pressing tab I am creating new row (on focus out) , but that's not a good user interface because whenever I am clicking outside the Disc% field it is crating new row which is not correct

What I am trying to do is:

• After disc% when I press enter I want to create a new row so that it will be good for user
• I have tried doing this but it is not working correctly as when I reach Disc% and press enter it does nothing and when I focus out and again come back to Disc% and press enter then it creates new row but on one press it shows three times, I don't know what's wrong

Please check my Fiddle, as I have so many calculation that's why code is bit lengthier but I have commented the line where the issue is

• when target matches disc% I am doing like below

  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)
  
      }
    }
  
   });
  }
  

I am doing it like $(document).on('focusout', (e) => { because ItemName field in my table is autoComplete and when creating new row I want it to behave like the above.

Answer 1

What you need to do is move the keypress function out of the focusout function that you have. JSFiddle

Because you are checking to see if they have pressed enter inside the focus out function, it is not behaving as you would expect.

After moving it outside of that function it behaves as expected, the alert is only triggered once, and the row is created even when focus is still inside the input element.

$(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)

        }
      }

    });

Not question related (since you were talking about user experience):

One thing to keep in mind is "How will the user know to press enter to create a new row". It may be good to also include a button to add a row, and maybe a little element that reveals more information on hover that explains they can use enter to make a new row.

Also, consider styling the total row to look like it is apart of the table, that way the user would know what the numbers match up to.