How can you mask input (e.g. first X characters of credit card number) with RadInput on blur?

[jgill]

I wanted to find out if RadInput's mask feature can address this scenario.  We have the need to hide part of sensitive data after it is entered into a textbox field.  Example: Imagine a user enter's their credit card number or country specific person Id (e.g. Social Security Number for the US) and you want to mask all but the last 4 characters after entry/loss of focus.

1. User enters the numeric value into the input field: 123456789
2. The control loses focus by the user clicking or tabbing out of the input field
3. The value 123456789 then changes to appear as *****6789 but the value of 123456789 is still retained in a manner where serverside code can request the value from the input control and 123456789 is returned not *****6789.

Is this a usage case for RadInput and how can this be accomplished if it is an out of the box, or almost out of the box feature?

[Veli]

Hello jgill,

This functionality is officially not supported. You can hack the RadMaskedTextBox client object and implement this behavior, but note that this is not guaranteed to work compatibly with other RadMaskedTextBox functionality. Still, if you want to give it a try, you can use the client-side OnLoad event of the RadMaskedTextBox component to overwrite the get_displayValue() method:

<telerik:RadMaskedTextBox ID="RadMaskedTextBox1" runat="server"
    Mask="##########" DisplayMask="******####">
    <ClientEvents OnLoad="maskedLoad"/>
</telerik:RadMaskedTextBox>

function maskedLoad(sender, args)
{
    //indicates the number of visible digits from the end of the value
    sender._visibleDigits = 4;

    //cache the original get_displayValue method and overwrite it
    sender._originalGetDisplayValue = sender.get_displayValue;
    sender.get_displayValue = Function.createDelegate(sender, function ()
    {
        var value = this.get_valueWithPrompt();
        if (!isNaN(parseInt(value)))    //if value can be parsed into a number
        {
            //cache the original get_valueWithPrompt method and overwrite it
            //we need this because the original get_displayValue uses this method
            //to retrieve the value to be displayed
            this._originalGetValueWithPrompt = this.get_valueWithPrompt;
            this.get_valueWithPrompt = Function.createDelegate(this, function ()
            {
                var original = this._originalGetValueWithPrompt.call(this);

                if (!isNaN(parseInt(original)))
                {
                    //if value can be parsed in to a number and it has
                    //more digits than the visible digits number, we
                    //want to return the last N digits, where N = this._visibleDigits
                    if (original.length > this._visibleDigits)
                    {
                        original = original.substr(original.length - this._visibleDigits);
                    }
                }

                return original;
            });

            //call the original get_displayValue with the overwritten get_valueWithPrompt.
            var displayValue = this._originalGetDisplayValue.call(this);
            //restore the original get_valueWithPrompt method
            this.get_valueWithPrompt = this._originalGetValueWithPrompt;

            return displayValue;
        }

        //if original value with prompt cannot be parsed into a number,
        //fall back to the original get_displayValue method
        return this._originalGetDisplayValue.call(this);
    });
}

NOTE: The above piece of code is not officially supported by Telerik support and is not guaranteed to work in all scenarios or not break existing functionality. Use at your own risk.

Veli
the Telerik team

[Jeff]

I would officially like to request this in a later version as a feature that can be configured without the hack method.  

[Veli]

Hi Jeff,

We have created a PITS item for this feature request, where you and other community members can vote to raise its priority for our future planning.

Veli
the Telerik team

[Charles]

I too have a need for this feature. Did it ever get implemented?

[Rumen]

Hello Charles,

Please take a look at the following feedback portal item which is completed: IMPROVE RadMaskedTextBox with ability to hide/mask certain characters when the input is not in focus.

You can use the built-in solution provided in it.

Best regards,
Rumen
Progress Telerik