Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Text Field Skip

Avatar

Former Community Member
Hi,

I am creating forms which have a 1 character limit. What I want to do for usability is the cursor to jump to the next field in the tab order when the character limit is reached, without the user having to hit tab or use the mouse.



Am I missing something or is there an easy way to do this?



Thanks



Richard
3 Replies

Avatar

Former Community Member
There are other posts about this already but I'm not sure the full solution is posted. (not that this is a full solution - but I got it working for 3 different cases). You have to determine the length of the current field, and then set focus to the next field.



For a text field, the length depends on if it's a rich text field or not:



***** TEXT FIELD CHANGE EVENT (Javascript) *****



var currentLength = xfa.event.newText.length; // this.rawValue.length is wrong because the character change hasn't been committed yet.

// xfa.host.messageBox( "Current: " + currentLength );



var maxLength = 0;

// Find the max number of characters that the field supports

if (this.value.oneOfChild.className == "text")

{

maxLength = this.value.oneOfChild.maxChars;

}

else

{

maxLength = this.value.oneOfChild.maxLength;

}



// Change focus if we've filled up the field.

if( currentLength == maxLength )

{

xfa.host.setFocus("NumField3");

}



**** END SCRIPT ****



For a numeric field: I didn't actually figure out how to get the max length of the field, programmatically (may have to use the picture clause to figure that out???) Here's the simple script where you hardcode the length of the numeric field:



***** NUMERIC FIELD CHANGE EVENT (Javascript) *****



var maxLength = 4; // instead just hardcode the length of the field, for now

var currentLength = xfa.event.newText.length;



// Change focus if we've filled up the field.

if( currentLength == maxLength )

{

xfa.host.setFocus("NumField1");

}



**** END SCRIPT ****



If your field is a numeric field with a comb field property, you can use that to determine the max size of the field:



***** NUMERIC COMB FIELD CHANGE EVENT (Javascript) *****



var currentLength = xfa.event.newText.length;



// This field has a comb field, so I can get the max length from that.

// var maxLength = this.value.oneOfChild.maxLength; // Doesn't work for a numeric

var maxLength = this.ui.numericEdit.comb.numberOfCells;



if( currentLength == maxLength )

{

xfa.host.setFocus("TextField2");

}



**** END SCRIPT ****



I hope that helps. Maybe someone can fill in other field types or figure out how to programmatically determine the max length of a numeric field.



Mike

Avatar

Former Community Member
Also - Note that I've set focus to a hardcoded field - there must be an easy way to determine the next field based on the tab order.

Avatar

Former Community Member
That is very, very helpful thanks.



I adapted your idea and it worked perfectly.



Richard