Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Can I make a special character appear when typing?

Avatar

Former Community Member

Hi everybody.

I have a form with a text field provided with a validation script, which allows the user only to enter values in the format 999999-9999. The script is places on the exit event.


var myRegex = /\d{6}\-\d{4}/;


var

singleDigits = [0,1,2,3,4,5,6,7,8,9];

If the format is not correct, the user will get an error-message.

Now I would like the hyphen to appear automatically when typing. That means when the user has typed 123456 it will display as 123456-, ready to enter the last four characters.

Is that possible.

Kirstine

P.S. I know I can make that (almost) happen if I make the field a numeric field, but for several reasons this is not an option.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Here is a little script that can do what you are looking for..

Place the script in the Change event of the Text Field and set the Max chars property to 11 for the Text Field.

// restrict entry to digits and a dash
if (xfa.event.change.match(/[0-9\-]/) == null)
    xfa.event.change = "";

// Allow the hyphen at the 7th character only
if (xfa.event.change == "-" && xfa.event.selEnd != 6)
    xfa.event.change = "";

// If the 7th character is a digit, and they're typing at the end, insert the hyphen
if (xfa.event.change.match(/[0-9]/) != null &&
    xfa.event.newText.length == 7 &&
    xfa.event.selEnd == 6) 
{
    xfa.event.change = "-" + xfa.event.change;
}

// don't allow any characters past 10 (11 with a hyphen)
var vMax = 10;
if (xfa.event.newText.indexOf("-") != -1)
    vMax = 11;

Thanks

Srini

View solution in original post

3 Replies

Avatar

Level 10

HI Kristine,

It is not exactly what you want but you could try a display pattern on your text field of "text{999999-9999}".  This would put the hyphen in but only when the user exits the field and only if the value entered matches the display pattern (in your case ten digits).  One advantage of this is that you can validate the value in the exit event with code something like;


if (this.formattedValue == this.rawValue)
{
   app.alert("error");
}

I have coded something similar to what you want but it did get quiet complicated when the user deleted characters, backspaced over the hyphen or cut-and-pasted something but the user experience wasn't that great, they didn't seem to like things happening that they didn't expect.  You maybe better off with two fields.

Anyway the pattern can be entered by clicking the "Pattern" button on the field tab of the Object palette.

Good luck,

Bruce

Avatar

Correct answer by
Level 10

Here is a little script that can do what you are looking for..

Place the script in the Change event of the Text Field and set the Max chars property to 11 for the Text Field.

// restrict entry to digits and a dash
if (xfa.event.change.match(/[0-9\-]/) == null)
    xfa.event.change = "";

// Allow the hyphen at the 7th character only
if (xfa.event.change == "-" && xfa.event.selEnd != 6)
    xfa.event.change = "";

// If the 7th character is a digit, and they're typing at the end, insert the hyphen
if (xfa.event.change.match(/[0-9]/) != null &&
    xfa.event.newText.length == 7 &&
    xfa.event.selEnd == 6) 
{
    xfa.event.change = "-" + xfa.event.change;
}

// don't allow any characters past 10 (11 with a hyphen)
var vMax = 10;
if (xfa.event.newText.indexOf("-") != -1)
    vMax = 11;

Thanks

Srini

Avatar

Former Community Member

Thanks Srini, so much.

I really appreciate all the help I get in this forum.

Kirstine