Show and Hide Passwords in a TextBox

Environment

Product	Telerik UI for ASP.NET MVC TextBox
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.2.621 version

Description

How can I toggle sensitive data, such as passwords, 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 TextBox to text or password so that the text is displayed or obscured.

Razor

    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Placeholder("Password")
        .Value("myBigS1cret")
        .HtmlAttributes(new { type = "password" })
    )
    <span toggle="textbox" class="k-icon k-i-eye toggle-password"></span>

JS

    <script>
        $(document).ready(function(){
            $(".toggle-password").click(function () {
                $(this).toggleClass("k-i-minus k-i-eye"); //toggle the current icon
                var input = $("[id='" + $(this).attr("toggle") + "']"); //get the input

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

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET MVC TextBox Resources

• ASP.NET MVC TextBox Documentation

• ASP.NET MVC TextBox Demos

• ASP.NET MVC TextBox Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Telerik REPL: Show and Hide Passwords in TextBox
• Client-Side API Reference of the TextBox for ASP.NET MVC
• Server-Side API Reference of the TextBox for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base