Show and Hide Passwords in a TextBox

Environment

Product	Telerik UI for ASP.NET Core TextBox
Progress Telerik UI for ASP.NET Core 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.

Index.cshtml

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

Script.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 Core TextBox Resources

• ASP.NET Core TextBox Documentation

• ASP.NET Core TextBox Demos

• ASP.NET Core TextBox Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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