New to Telerik UI for ASP.NET Core? Download free 30-day trial

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

See Also

In this article