Show and Hide Passwords in MaskedTextBox

Environment

Product	Progress® Kendo UI® MaskedTextBox for jQuery
Product Version	Created with the 2018.3.1017 version

Description

How can I toggle sensitive data, such as SSN or card numbers so that the user can preview the entered input?

Solution

1. Add a button or a span element and handle the click event for it.
2. In the event handler, change the type attribute of the MaskedTextBox to text or password so that the text is displayed or obscured.

<h4>Enter SSN</h4>
<input id="maskedtextbox" type="password"/>
<span toggle="maskedtextbox" class="k-icon k-i-lock toggle-password"></span>

<script>
    $(document).ready(function() {
    $("#maskedtextbox").kendoMaskedTextBox({
        mask: "000-00-0000"
    });


    $(".toggle-password").click(function () {

        $(this).toggleClass("k-i-lock k-i-unlock");
        var input = $("[id='" + $(this).attr("toggle") + "']");

        if (input.attr("type") === "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
    });
</script>