Mask for textbox that holds phone number

[Jane1234]

Hi There,

Thank you for having a look.

Do you know how to set a mask that depends on the first two numbers entered into a textbox?

For instance, if a textbox is a phone number, and the person has entered 04 then we want the mask for that textbox to be 0000 0000
But if the first two letters are 08 then we want the mask to be 00 0000 0000

Thanks

Jane.

[Pat Bremkamp]

Re: Mask for textbox that holds phone number

What I did was create a User Defined Function called format_phone(input_number) that returns the number in the correct format. That way you can test and manipulate to your heart's content.

[Davidk]

Re: Mask for textbox that holds phone number

You want to start typing into textbox1 and as you enter text you'd like the mask to adjust depending on text you're entering?

[Jane1234]

Re: Mask for textbox that holds phone number

Thanks Pat. That helps to know that's what you done.
David, yes, that's correct. As we start typing into a textbox1 we'd like the mask to adjust depending on the first two values they're entered.

[Davidk]

Re: Mask for textbox that holds phone number

There is a way to get this done... but it's a little complex. I'll assume we're working with a UX. There is a feature for the Mask property that allows you to set a dynamic mask. Usually the "dynamic" part depends upon another control, so there's not really an issue. The dynamic mask is set when the control with the mask gets focus. Because we're already in the control we need to get out and come back in. This means setting focus to another control, and then setting focus to your Mask control. And... in your case... only after the first 2 characters have been entered.

Further, once you're back into the control (done with a .setFocus) you don't want the data already entered to be highlighted. You want your cursor to be positioned at the end of the data already input.

So, for this to work, you must be ok with having another field around (usually there is anyway). If you need to add a dummy field, then it can be made invisible(ish). You can't hide this extra field... because we need to set focus to it.

Attached is a test component.

In Client Side Properties, check on Client side formatting and make sure Format type is set to Mask. Then click into the builder for the Format definition. Set the Mask type to Conditional and enter the name of a Javascript function... e.g. myMask

Showing the Mask characters doesn't work with this whole process... but... you can't have everything.

Click OK to save this section.

In the UX Javascript functions section enter this code...

function myMask(e) {

var ac = {dialog.object}.getValue('textMask');
ac = ac.substring(0, 2);
switch(ac){
	case '04':
		return '0000 0000';
		break;
	case '08':
		return '00 0000 0000';
		break;
	default:
		return '';
	}
			
}

This code runs when the control gets focus. We grab what's already been entered, if anything, grab the first 2 characters of that and test it. If it's 04 we return a Mask of 0000 0000. If it's 08 we return a Mask of 00 0000 0000. Anything else we just return... no Mask set.

Now... back to the control that has the Mask. In the onKeyUp event of this control, put this code...

setTimeout(function(){
	var myData = {dialog.Object}.getValue('textMask');
	myData = myData.trim();
	if(myData.length == 2){
		var keyID = event.keyCode;
		switch(keyID){
			case 8:
				//backspace key
				break;
			default:
				{dialog.Object}.setFocus('textAC');
				{dialog.Object}.setFocus('textMask');
		}
	}
},50);

Every time we release a key this fires. We grab the control value, trim it, test it for a length of 2 and then grab the keyCode of the key just pressed.

If the key is a backspace then don't do anything. Otherwise, set focus to another control, and then back again to the control with the Mask. Since we now have focus again, the Mask code is fired and tests the input. All this is wrapped in a .setTimeout of 50ms to allow time for the control to recognize that something has been typed.

Finally, in the onFocus event of this control put this code...

var val = this.value;
val = val.trim();
var len = val.length;
setTimeout(function(){
	var el = $('{dialog.ComponentName}.V.R1.TEXTMASK');
	el.setSelectionRange(len, len);
},25);

As soon as out Mask control gets focus we grab it's value, trim it, and get it's length. Then we use a great little method called .setSelectionRange which lets us put the cursor where we want. We have to wrap this part is a .setTimeout as well, just to give things a chance to settle down a bit.

So, in summary, we type, test the input, and if we have typed in data with a length of 2 we get out and come back in. When we come back in Alpha fires off it's Mask code, and we fire off our own focus code to shove the cursor to the end.

Whew!

[Jane1234]

Re: Mask for textbox that holds phone number

Whew indeed! But happy whew to finally see it pieced together.
Thank you David. I wouldn't have thought of doing it that way. Your input and guidance is appreciated.
We had been trying to edit the mask dynamically by accessing getControl{'phone'}.format.mask and others of similar but this makes more sense.
We're glad to see how to get it to work.
Cheers!

[Davidk]

Re: Mask for textbox that holds phone number

Jane,

You're idea is way better... so let's use that. I'd like to find a way to steal the mask array and save it. I don't really feel like creating it by hand... so let's set up 2 controls. One with a simple mask of 0000 0000 and the other with a simple mask of 00 0000 0000. I created 2 controls name textMask04 and textMask 08. You can hide these controls.

We no longer have to play with setFocus... so that's excellent. Delete the code in the onFocus event of the main control.

The conditional mask on the main control still needs to be set.

The onKeyUp event code for the main control is now...

setTimeout(function(){
	var myData = {dialog.Object}.getValue('textMask');
	myData = myData.trim();
	if(myData.length == 2){
		var keyID = event.keyCode;
		switch(keyID){
			case 8:
				//backspace key
				break;
			default:
				setMask(myData);
		}
	}
},50);

Now, when we're ready to set a new mask, we're calling a Javascript function named setMask and we're passing in our data.

The setMask function is...

function setMask(myData){

	var ac = myData.substring(0, 2);

	switch(ac){
		case '04':
			var el = {dialog.Object}.getControl('textMask');
			var elNew = {dialog.Object}.getControl('textMask04');
			var newMask = elNew.format._pMask.mask;
			el.format._pMask.mask = newMask;			
			var elMask = $('{dialog.ComponentName}.V.R1.TEXTMASK');
			elMask.setSelectionRange(2, 2);
			break;
		case '08':
			var el = {dialog.Object}.getControl('textMask');
			var elNew = {dialog.Object}.getControl('textMask08');
			var newMask = elNew.format._pMask.mask;
			el.format._pMask.mask = newMask;			
			break;
		default:
			var el = {dialog.Object}.getControl('textMask');
			el.format._pMask.mask = "";
	}
}

We getting our data, ensuring it's just the first 2 characters. If it's 04, grab a pointer to our main control. Get a pointer to our Mask04 control and steal it's Mask.
Set the Mask of our Main control to the Mask of the Mask04 control.

Same for 08.

But... in the case of entering 08, and then changing your mind, and entering 04, we need to set the cursor to the end of 04.

This is much, much nicer.

EDIT: Have to take care of the Mask... if you don't want a mask... so note the "default" entry in setMask. Remember to update the attached component.

[Jane1234]

Re: Mask for textbox that holds phone number

ha ha haaaaaaa! Awesome, that's fantastic David.
I can see the two lines of code I had wrong previously and why it wasn't working.
Thank you for sharing - you've put a smile on the dial!
Thanks again,
Jane.

[Davidk]

Re: Mask for textbox that holds phone number

To really hammer this one into the ground... you can create you're own Mask on the fly. To get the format right, create a textbox with the Mask that you want and see what that looks like when rendered and run. Then, copy it.

Here's the code to create the 2 masks used in this thread.

function setMask2(myData){

	var ac = myData.substring(0, 2);

	switch(ac){
		case '04':
			var el = {dialog.Object}.getControl('textMask2');
			
			var newMask = [];
			for(i=0;i<9;i++){
				if(i==4){
					newMask.push(" ");
				}else{					
					newMask.push(/[0-9]/);
				}
			}				
			
			el.format._pMask.mask = newMask;			
			var elMask = $('{dialog.ComponentName}.V.R1.TEXTMASK2');
			elMask.setSelectionRange(2, 2);
			break;
		case '08':
			var el = {dialog.Object}.getControl('textMask2');
			
			var newMask = [];
			for(i=0;i<12;i++){
				newMask.push(/[0-9]/);
			}
			newMask[2] = " ";
			newMask[7] = " ";				

			el.format._pMask.mask = newMask;			
			break;
		default:
			var el = {dialog.Object}.getControl('textMask2');
			el.format._pMask.mask = "";
		
	}
}

A Mask is an Array. 0000 0000 has 9 elements. The code above loops 9 times and has a test for the 4th (zero based) element.

For the Mask 00 0000 0000, which has 12 elements I just set them all to the same value in a loop... and then just changed the 2 that are different. Just another way of getting something done.

Using this code, you don't need any other controls.

[Jane1234]

Re: Mask for textbox that holds phone number

Beautiful. Simple, easy and effective.
Thank you David. I think you've thoroughly hammered this one out!
It works perfectly and with the exact desired result.
Noice.

[Jane1234]

Re: Mask for textbox that holds phone number

Hey David,
Correction, it's not working perfectly on our machine....it's having trouble with the {dialog.object}.getControl as it's not retrieving the control. Do you mind letting me know what version of alpha you are using?
Thanks,

[Jane1234]

Re: Mask for textbox that holds phone number

phonemask.a5wcmp
Here's the test comp I'm trying to setup. I'm trying to isolate the javascript function so that it can be put in a common.js file so it can be called from multiple components.

It's failing at the getControl and the window.alert is returning false instead of [Object]. FYI pls excuse my window.alerts as that's my way of debugging.

[Jane1234]

Re: Mask for textbox that holds phone number

Um, I think there might be a bug in our version of Alpha David because when I copied your textbox into my component it started working (yay). But if I place a new textbox in the component and point the mask to work for the new textbox, the getControl code doesn't work.
Thanks again for your test components David.

[Davidk]

Re: Mask for textbox that holds phone number

Hey Jane,

There are 2 issues with your component.

1. Add a Mask to your Textbox and then .getControl will work.
2. The way you're setting elMask isn't quite right. This code works...

var myMask = eval("'" + dialogComponentName + '.V.R1.' + textBoxName.toUpperCase() + "'");
var elMask = $(myMask);

Since we're using getElementById, we must be very precise. Rendered, the control is 'DLG1.V.R1.PHONE'. The 'PHONE' part is uppercase.

Your component works with Alpha release 2999 and 3085.

[Jane1234]

Re: Mask for textbox that holds phone number

Hey David - yeah I was in the middle of debugging it when I sent it to you but since I wasn't able to get past the getControl part I hadn't yet reached the second error on our part. My apologies.
Great - we have it working now. Thank you. Your time and friendly nature is appreciated