You are viewing limited content. For full access, please sign in.

Question

Question

Using Tab to click Enter in a Forms list

asked on January 8, 2019

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

2 0

Replies

replied on December 6, 2019

This is a great request, we have customers who also would like to use the Tab key for this exact feature. A lot of users are used to using the Tab key in other programs and would like to do this same while using these LF Forms.

0 0
replied on December 9, 2019 Show version history

Backup the awesomeplete.js file in C:\Program Files\Laserfiche\Laserfiche Forms\Forms\lib\awesomplete\1.1.1\

and replace with the attached, renamed to the .js extension. I've hardcoded autoFirst: true and tabSelect: true

 

I took the latest version of awesomeplete.js from https://github.com/LeaVerou/awesomplete. It is updated with a New TabSelect property. To get it into Laserfiche, there is a few modificatons the LF engineers did, smart ppls, they commented it.

 followed their comments, updated the copy from Git, pasted into the folder and it seems be working. Let us know if this works for you. Keep in mind every update to LF Forms would smash over this hack, until they update the full release code.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.