We have a request to make the Tab key function like the Enter key when a user clicks it.
We have a large Vendor Name list field. In order for the list not to display all we have the following code on the field.
$('#q6 input').attr('autocomplete', 'test'); $("#q6 input").on('click', function(){ $('#q6 .awesomplete-child').hide(); }); //ends list function
Then I have it so that it only shows vendors after typing 3 characters.
$("#q6 input[type='text']").on("input", function() { var val = $(this).val(); if (val.length < 3) { $('#q6 .awesomplete-child').hide(); } else{ $('#q6 .awesomplete-child').show(); } }); //end three type ahead function
This works great and shows correctly.
However, the data entry users really want to arrow down (which works) and hit the Tab key which will will select the vendor and move on to the next field. This does not work, they have to arrow down, hit Enter to select the vendor, then hit tab to go to the next field. If they just hit Tab while on a vendor it goes to the next field but leaves what they type, not select.
I have the start of code that seems to work for the check
$("#q6 input").on('keydown', function(e){ if(e.keyCode ==9) { alert("I clicked tab"); } });
The keyCode for tab is 9 and when I click tab on the vendor I get my alert. If I click Enter I dont get any alery so the check on the keyCode seems to work. After trying a variety of examples I cannot get any code working where it actually presses the Enter key on the vendor (keyCode 13).
Has anyone done something like this?
Thanks,
Chris