Automatically focus on next text field when first text field's maxlength is reached, and go back to previous text field when current text field is empty

[futurist]

Hi,

 

So I'm trying to set up a submission form with several text fields and I want the text fields to behave in a certain way that when I fill in a text field and I reach the maxlength, I want the next field to be automatically focused. So lets say I have five text fields whose maxlength are all set to 3. When I input three characters on text field 1, I want the focus to be automatically on text field 2, then when I fill in three characters on text field 2, I want the focus to be on text field 3, and so on.

At the same time, when I clear a text field of all input, I want to be focused on the previous text field. So for example I'm on text field 4 and i decide to delete all that I've input here, then text field 3 should be automatically focused.

 

I was able to do this using JavaScript.

 

On your Submission Form, go to Configure Fields and add a Header & Footer. On the Footer, paste the following:

 

<script>

var elts = document.getElementsByClassName('cbFormTextField');
Array.from(elts).forEach(function(elt, i){
  elt.addEventListener("keyup", function(event) {

if(i == (elts.length - 1)){
varNextSibling = elts[i].id;

}
else if (i < elts.length){
varNextSibling = elts[i+1].id;
}

myLength = elt.value.length;
maxLength = elt.maxLength;

    if (myLength  == maxLength )  {
     
      // Focus on the next sibling
      document.getElementById(varNextSibling).focus();

    }

if (myLength == 0){
varPrevSibling = elts[i-1].id;
 // Focus on the previous sibling
document.getElementById(varPrevSibling).focus();
}

  });
})
</script>

 

This is applied to all text fields regardless of how many there are (as long as their className is cbFormTextField-- which means this also applies for virtual text fields)