Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Dynamically formatting phone number or date fields

Avatar

Level 4

How do I format Phone number or date fields using rule editor?

I am able to format it after focusout of the field, but I am looking into how to do that dynamically while the user types in.

1 Accepted Solution

Avatar

Correct answer by
Level 7

deepakt84913413

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

Screen Shot 2018-03-01 at 23.25.35.png

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James

View solution in original post

3 Replies

Avatar

Level 4

Add some custom JavaScript code onReady of form or onBlur/onKeypress/Keydown event of those field. You can put your own custom logic.

There are many formatted libraries available, can use them too.

Avatar

Level 4

Yeah. I was trying out a bunch of code for that but it has not been possible as of now. I was trying to see if anyone has any example code for that.

Avatar

Correct answer by
Level 7

deepakt84913413

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

Screen Shot 2018-03-01 at 23.25.35.png

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James