Is there a better way to changefocus as soon as value is received

Lon Landry4
Mega Sage
The idea is to move the cursor to next field without user interacting.
The below code moves the cursor following each paste.
The wait for a tenth of a second allows for all of the data to be transferred before moving on to next field.
The code below seems to work, but for a dozen field changes the program stops working as expected. 
(cursor just stops after going to 6th or 7th field)
 
Is there a better approach for this?
 
function onLoad() {
 //Get control of field to identify keyup event, then pause for 1/10 of a second  
    var control = g_form.getControl('asset_tag');
control.onkeyup = nextField;
window.setTimeout(nextField,100); 
 
//Move cursor to next field
function nextField(){ 
g_form.getControl('serial_number').focus();
}
 
var control1 = g_form.getControl('serial_number');
control1.onkeyup = nextField1;
window.setTimeout(nextField1,100); 
 
//Move cursor to next field
function nextField1(){ 
g_form.getControl('mac_address').focus();

}

}

1 ACCEPTED SOLUTION

Nick Parsons
Mega Sage

I suggest that you create an array of all the fields you want to automatically move to, and the loop through each of these and add your event listener to each:

function onLoad() {
  var fields = ["asset_tag", "serial_number", "mac_address"];
  var last = fields.pop();
  fields.forEach(function(field, i) {
    var control = g_form.getControl(field);
    control.addEventListener("keyup", function() {
      var nextField = fields[i+1] || last;
      var nextControl = g_form.getControl(nextField);
      nextControl.focus(); // or setTimeout(function() {nextControl.focus()}, 100) if you really need the delay
    });
  });
} 

 

Note:

  • It's better practice to use addEventListener() rather than onXYZ DOM properties when adding events so that you don't accidently squabble any preexisting event listeners added via `onkeyup`
  • I'm not clear on what the setTimeout() is for, you seem to be treating it as though it's synchronous (when it's really asynchronous, ie: all the code after it in the main script will run before the callback function triggers). I've provided a comment on where you may use it if needed. 

View solution in original post

2 REPLIES 2

Nick Parsons
Mega Sage

I suggest that you create an array of all the fields you want to automatically move to, and the loop through each of these and add your event listener to each:

function onLoad() {
  var fields = ["asset_tag", "serial_number", "mac_address"];
  var last = fields.pop();
  fields.forEach(function(field, i) {
    var control = g_form.getControl(field);
    control.addEventListener("keyup", function() {
      var nextField = fields[i+1] || last;
      var nextControl = g_form.getControl(nextField);
      nextControl.focus(); // or setTimeout(function() {nextControl.focus()}, 100) if you really need the delay
    });
  });
} 

 

Note:

  • It's better practice to use addEventListener() rather than onXYZ DOM properties when adding events so that you don't accidently squabble any preexisting event listeners added via `onkeyup`
  • I'm not clear on what the setTimeout() is for, you seem to be treating it as though it's synchronous (when it's really asynchronous, ie: all the code after it in the main script will run before the callback function triggers). I've provided a comment on where you may use it if needed. 

Thanks for your help with this and putting me on the right path to stay in best practices. I see to add more variables, I just need to add variables to line 2.