Show/hide Password in MaskedTextBox


Product Kendo UI MaskedTextBox
Kendo UI version Created with the 2018.3.1017 version


I use MaskedTextBox widget for entering sensitive data - SSN, card number, etc. How can I toggle it to preview what was entered by the user?


Add a button or span element and handle the click event for it. 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>

    $(document).ready(function() {
        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");
In this article
Not finding the help you need? Improve this article