Show and Hide Passwords in MaskedTextBox

Environment

Product Kendo UI MaskedTextBox
Kendo UI 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>
In this article
Not finding the help you need? Improve this article