Jump to content

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


Recommended Posts

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)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...