Multiple mask types

[Paul Huff]

Hi,

Are multiple masks possible on a masked textbox?

I am taking a credit card as an input and only want to allow numbers and format them with the dash, but I also want to mask the first 3 sets of digits

Final output should look like: XXXX-XXXX-XXXX-1234

This gives me the numbers:

<0..9><0..9><0..9><0..9>-<0..9><0..9><0..9><0..9>-<0..9><0..9><0..9><0..9>-<0..9><0..9><0..9><0..9>

This gives me the mask:

XXXX-XXXX-XXXX-<0..9><0..9><0..9><0..9>

However, can I use a mask to restrict the first 3 sets as numbers or must I use a custom javascript validation routine for this?

Realistically this control should have a mask AND input restriction capability.

Thanks!

Paul

[Paul Huff]

Ok, so I figured it out.

Mask = ####-####-####-####
PromptChar = _

DisplayMask = XXXX-XXXX-XXXX-####

[Paul Huff]

Nevermind, this doesn't work.

It outputs XXXXs and the displayed portion is the first digits, not the last.  Arg.

[Scott Marx]

Did you every figure this out?

[Veli]

Hi guys,

This scenario is not supported by RadMaskedTextBox. You cannot mix prompt chars and portions of the value. If you do, RadMaskedTextBox always takes characters from the beginning of the value string (not from the end as you need). You can use a hack to overwrite this behavior, though.

NOTE: The following code is not officially supported and not guaranteed to work with other control functionality. Use at your own risk.

<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server"
    Mask="####-####-####-####" PromptChar="_"
    DisplayMask="XXXX-XXXX-XXXX-####">
    <ClientEvents OnLoad="initializeForCreditCard"/>
</telerik:RadMaskedTextBox>

function initializeForCreditCard(sender, args)
{
    sender._originalGetDisplayValue = sender.get_displayValue;
    sender.get_displayValue = function ()
    {
        var value = this.get_valueWithPrompt();

        // hack: add this part to clip the display value to the last 4 characters
        if (value.length > 4)
        {
            value = value.substr(value.length - 4);
        }
        //end of hack

        while (value.length < this._displayLength)
        {
            value += this.get_promptChar();
        }

        this._UpdateDisplayPartsInRange(value, 0, this._displayLength);
        if (this._displayParts)
            return this._GetVisibleValues(this._displayParts);
        else
            return this._GetVisibleValues(this._parts);
    }
}

The above javascript function overwrites a RadMaskedTextBox method. It causes the textbox to take the last 4 characters when building the display value. Thus, you get a display value of the form xxxx-xxxx-xxxx-#### where the 4 digits at the end are the last 4 digits of the value you have entered. I use RadMaskedTextBox's client-side OnLoad event to  attach this script. This means I overwrite the current instance method, do not touch the prototype. You can have other RadMaskedTextBox instances on your page and they will not be affected by the above hack. Only your credit card textbox will implement it.

Again, this is unsupported code. No guarantees given.

Veli
the Telerik team

[Scott Marx]

It works as far as I can tell. Why isn't this a built in feature? From searching the forums this seems to be a very common situation.

Thank you...

[Veli]

RadMaskedTextBox's current design prevents such scenarios. The DisplayMask does not support showing only parts of the value entered by the user and hiding other parts. We can only suggest scenario-specific workarounds for that.

Veli
the Telerik team