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
- Add a
buttonor aspanelement and handle theclickevent for it. - In the event handler, change the
typeattribute of the TextBox totextorpasswordso 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.