Pending Review
Last Updated: 28 Feb 2019 09:53 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.