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

ShowPassword button for RadTextBox with TextMode Password

How to

Implement the ShowPassword button for a RadTextBox with TextMode="Password".

Show password button


In the OnLoad client-side event of the TextBox we add the span element containing the "eye" to the TextBox element, hook the "keyup" event of the TextBox' input and hook the mousedown, mouseup and mouseout events of the "eye" element.

<telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="Password" >
    <ClientEvents OnLoad="OnLoad" />
.reveal-eye {
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
        z-index: 2;
        width: 30px;
        background: #fff url( 50% 50% no-repeat;
        cursor: pointer;
        visibility: hidden;
        opacity: 0;
        transition: opacity .2s ease 0s,visibility 0s linear .2s;
    } {
            display: block;
            visibility: visible;
            opacity: 1;
            transition: opacity .2s ease 0s,visibility 0s linear 0s;
function checkShowPasswordVisibility() {
        var $revealEye = $telerik.$(this).parent().find(".reveal-eye");
        if (this.value) {
        } else {
    function OnLoad(sender, args) {
        var $revealEye = $telerik.$('<span class="reveal-eye"></span>')

        $telerik.$(sender.get_element()).on("keyup", checkShowPasswordVisibility)

            mousedown: function () { sender.get_element().setAttribute("type", "text") },
            mouseup: function () { sender.get_element().setAttribute("type", "password") },
            mouseout: function () { sender.get_element().setAttribute("type", "password") }
In this article