New to Kendo UI for jQuery? Download free 30-day trial

Show and Hide Passwords in MaskedTextBox


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


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


  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>

    $(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