1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Show password icon

Show password icon

Hi,

I have rendered a textbox and set the type to "password". Now I would like to have an icon in the textbox that will show the password when clicked.

I have found one forum thread that is almost what I wanted, but there a button outside the textbox is being used. I want an icon in the textbox.

Is this possible?


4 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team September 24, 2021 08:42 AM UTC

Hi Eddie Willcox, 
  
Greetings from Syncfusion support. 
  
We have achieved the requested requirement with help of addIcon method and Type property as mentioned below. 
  
@using Syncfusion.EJ2 
 
@Html.EJS().TextBox("password").Type("password").Placeholder("Enter the password").Created("onCreate").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 
 
<script> 
    function onCreate() { 
        this.addIcon("append", "e-icons e-input-eye"); 
        document.getElementsByClassName("e-input-eye")[0].addEventListener("click", function (e) { 
            let textObj = document.getElementById("password").ej2_instances[0]; 
            if (textObj.element.type === "password") { 
                textObj.element.type = "text"; 
            } else { 
                textObj.element.type = "password"; 
            } 
        }); 
    } 
</script> 
<style> 
    .e-input-eye:before { 
        content: '\e345'; 
        font-family: e-icons; 
        font-size: 13px; 
    } 
</style> 
 
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


BC Berly Christopher Syncfusion Team September 24, 2021 08:42 AM UTC

Hi Eddie Willcox, 
  
Greetings from Syncfusion support. 
  
We have achieved the requested requirement with help of addIcon method and Type property as mentioned below. 
  
@using Syncfusion.EJ2 
 
@Html.EJS().TextBox("password").Type("password").Placeholder("Enter the password").Created("onCreate").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render() 
 
<script> 
    function onCreate() { 
        this.addIcon("append", "e-icons e-input-eye"); 
        document.getElementsByClassName("e-input-eye")[0].addEventListener("click", function (e) { 
            let textObj = document.getElementById("password").ej2_instances[0]; 
            if (textObj.element.type === "password") { 
                textObj.element.type = "text"; 
            } else { 
                textObj.element.type = "password"; 
            } 
        }); 
    } 
</script> 
<style> 
    .e-input-eye:before { 
        content: '\e345'; 
        font-family: e-icons; 
        font-size: 13px; 
    } 
</style> 
 
  
  
Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Marked as answer
EW Eddie Willcox replied to Berly Christopher September 27, 2021 06:59 AM UTC

Thank you. This worked perfectly


BC Berly Christopher Syncfusion Team September 27, 2021 08:02 AM UTC

Hi Eddie Willcox, 
  
Most welcome. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon