Progress® Telerik® UI for ASP.NET MVC Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 20 Jan 2021 12:24 by ADMIN
Maurice
Created on: 21 Feb 2019 21:09
Category: NumericTextBox
Type: Feature Request
0
Social security credit card encryption mask

The ability to mask/encrypt the social security number and or credit card number, only showing the last 4. On focus, show all values on blur encrypt value showing only last 4. On post, send unencrypted value.

i.e. social security:  XXX-XX-1234

1 comment
ADMIN
Georgi
Posted on: 28 Feb 2019 09:53
Hi Maurice,

A possible solution is to use the Kendo MaskedTextBox and create a custom rule. Then within the blur event handler replace the first digits with a X and when the widget is focused restore the old value.

e.g.

@Html.Kendo().MaskedTextBox().Name("masked").Mask("~~~~-~~~-~~~~").Rules(x=> x.Add('~', y=> "function(x){return !isNaN(x) || x === 'X'}"))
 
 
<script>
    $(function () {
        $('#masked').on('blur', function () {
            var masked = $(this).data('kendoMaskedTextBox');
            var value = masked.raw();
             
            if (value) {
                masked.oldValue = value;
                masked.value("XXXXXXX" + value.slice(7,11))
            }
        })
 
        $('#masked').on('focus', function () {
            var masked = $(this).data('kendoMaskedTextBox');
            var value = masked.oldValue;
             
            if (value) {
                masked.value(value)
            }
        })
         
    })
</script>

For your convenience I am attaching a small sample which demonstrates the above approach. Please examine it and let me know if it helps.

I look forward to your reply.


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Attached Files:
Create an account Log In
View
Type
Status
Category