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

4 posts, 0 answers
  1. jgill
    jgill avatar
    116 posts
    Member since:
    Jul 2005

    Posted 28 Apr 2011 Link to this post

    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?

  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 04 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    25 posts
    Member since:
    Feb 2011

    Posted 30 Dec 2011 Link to this post

    I would officially like to request this in a later version as a feature that can be configured without the hack method.  
  5. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 03 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top