Password hide/show icon button on TextBox

[Marouen]

Hello,

Is there a way to have an icon button to show/hide input password in TextBox component?

I was able to add the icon in the textBox but not to detect the click. I also want to change the icon's class on click.

Then I would like to know how change TextBox type by code.

Thanks.

[Berly Christopher]

Hi Marouen, 

  

Greetings from Syncfusion support.  

  

We have checked the reported requirement and we can add the icon to the TextBox component in the Blazor platform. But we could not access the DOM element to achieve the show / hide functionalities. So, we suggest you to use our CSS TextBox component in the Blazor platform as mentioned below.  

  

<div id="ControlRegion"> 

    <div class="col-lg-6 control-section"> 

        <div class='e-input-group'> 

            <input class='e-input' type="@TxtType" placeholder='Enter Password'> 

            <span class='e-icons e-input-eye' @onclick="ShowPassword"></span> 

        </div> 

    </div> 

</div> 

@code{ 

    public string TxtType = "password"; 

 

    public void ShowPassword() 

    { 

        if(this.TxtType== "password") 

        { 

            this.TxtType = "text"; 

        } 

        else 

        { 

            this.TxtType = "password"; 

        } 

    } 

} 

<style> 

   .e-input-eye:before { 

        content:'\e345'; 

        font-family: e-icons; 

        font-size: 13px; 

    } 

</style> 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153658/ze/Password_153658-1342803344  

  

Regards, 

Berly B.C 

[Marouen]

Hi,

Thank you, it works perfectly !

[Berly Christopher]

Hi Marouen, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Arthur Butler]

Hi.  I am using fabric.css style and am unable to get this to look correct.  I want the first text box to look like the second one.  Since click event is not implemented for AddIcon, I need to do this using e-input-group.  Please help with the styling.  I have attached a simple example.

Regards,

Arthur

Attachment: ShowHidePassword_174fa3f6.zip

[Berly Christopher]

Hi Arthur, 

  

We have modified the sample by rendering the textbox component with “e-input-group” class and attached it below. 

  

 

<div id="ControlRegion"> 

    <div class="col-lg-6 control-section"> 

        <div class="e-input-group"> 

            <div class="e-input-in-wrap"> 

                <input class="e-input" type="@type" placeholder="Enter Password" /> 

            </div> 

            <span class="e-input-group-icon e-input-eye" @onclick="ShowPassword"></span> 

        </div> 

    </div> 

    <br/><br/> 

    <div class="col-lg-6 control-section"> 

            <SfTextBox @ref="txtbox2" class='e-input' type="@TxtType" placeholder='Enter Password' Created="onCreateTextBox"></SfTextBox> 

    </div> 

</div> 

@code{ 

    SfTextBox txtbox1; 

    SfTextBox txtbox2; 

    public string type { get; set; } = "password"; 

    public InputType TxtType = InputType.Password; 

 

    public void ShowPassword() 

    { 

        if (TxtType == InputType.Password) 

        { 

            TxtType = InputType.Text; 

            type = "text"; 

        } 

        else 

        { 

            TxtType = InputType.Password; 

            type = "password"; 

        } 

    } 

 

    public void onCreateTextBox() 

    { 

        this.txtbox2.AddIcon("append", "e-input-eye"); 

    } 

} 

 

  

Screenshot: 

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ShowHidePassword721229586  

  

Regards, 

Berly B.C 

[Arthur Butler]

Thank you.  This will work for me, but was hoping to use SfTextBox instead of input.

[Ponmani Murugaiyan]

Hi Arthur, 

Thanks for the update. 

You can add the icon in the textbox component with help of AddIcon() method. We have already showcased this in our demo site and in the previous sample. Kindly refer the below sample.  

   

Demo: https://blazor.syncfusion.com/demos/textbox/default-functionalities?theme=bootstrap4     

   

But we have already considered the support for “Event handling on added icon using addIcon method” as a feature in our end. This support will be included in upcoming patch release which is expected to be rolled out on October 5, 2021.  You can tract the status using the below feedback link. 

   

Feedback: https://www.syncfusion.com/feedback/14748/ 

Once, the feature has been included your requested requirement can be achieved using SfTextBox. We appreciate your patience until then. 

Regards, 

Ponmani M 

[Rocky]

Hi,

My requirement is am having 3 text box,

Current password, new password and confirm password need to apply validation for the textboxes

Validation rules minimum 8 characters max 50 characters, contains 3 out of 4 types of characters:

Lowercase,uppercase,symbol,number

Once the requirements mets it should tick of on circle

It should present asterix when characters are entered on screen by and when toggling its show password to see actual password I want solution in angular syncfusion cross field custom validation using angular reactive form with ejs text box . need to display validation error on ejs text box

[Mohanraj Mathaiyan]

Hi Marouen,

As per your requirement we are prepared the sample. In that we have validated as per requirement like Validation rules minimum 8 characters max 50 characters, contains 3 out of 4 types of characters: Lowercase, uppercase, symbol, number. Once the requirements meet tick of on circle and when toggling its show password to see actual password. We have attached the sample for your reference.

<div class="form-group template">

<div class="e-float-input" [ngClass]="{ 'e-success': username.valid }">

        <ejs-textbox floatLabelType="Auto"

                     type="password"

                     #default

                     id="current_password"

                     name="username"

                     placeholder="Enter your Password"

                     floatLabelType="Auto"

                     [(ngModel)]="UserDetails.username"

                     #username="ngModel"

                     minlength="8"

                     maxlength="50"

                     required

                     pattern="^((?=.*?[A-Z])(?=.*?[a-z])(?=.*?\d)|(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^a-zA-Z0-9])|(?=.*?[A-Z])(?=.*?\d)(?=.*?[^a-zA-Z0-9])|(?=.*?[a-z])(?=.*?\d)(?=.*?[^a-zA-Z0-9])).{8,}$"></ejs-textbox>

<!-- <span class="e-icons e-eye"></span> -->

        <span class="e-float-line"></span>

        <label class="e-float-text"

               [ngClass]="{

              'e-label-top': UserDetails.username !== '',

              'e-label-bottom': UserDetails.username == ''

            }"

               for="name"></label>

</div>

<span class="e-success"

          id="icon"

          *ngIf="username.valid"

          class="e-icons e-circle-check"></span>

<span class="e-error"

          *ngIf="

      username.errors &&

      username.errors.required &&

        (username.dirty || username.touched)

      ">

        * Enter current Password

</span>

<span class="e-error"

          *ngIf="

      username.errors &&

      username.errors.pattern &&

        (username.dirty || username.touched)

      ">

        * Enter a valid current password

</span>

Sample : https://stackblitz.com/edit/angular-btmnax-vgihnh?file=app.component.ts

Regards,

Mohanraj M

[Nerxhan Musliu]

I'm using the addIcon option that you provide, but still can't add an event trigger on reactjs

[UdhayaKumar Duraisamy]

You can bind events to the icon in the created event of the TextBox, as shown in the code snippet below.

function Multiline() {

  let textareaObj;

  function oncreated() {

    textareaObj.addIcon('append', 'e-icons e-eye');

    var el = document.querySelector('.e-eye');

    el.addEventListener('click', function () {

      console.log('Icon clicked');

    });

  }

  return (

    <div className="control-pane">

      <TextBoxComponent

        id="default"

        floatLabelType="Auto"

        placeholder="Enter your address"

        ref={(scope) => {

          textareaObj = scope;

        }}

        created={oncreated}

      ></TextBoxComponent>

    </div>

  );

}

Sample: https://stackblitz.com/edit/react-2ghk7k?file=index.js

[Nerxhan Musliu]

Since this icon is attached on created event, how to change the eye icon into another icon, for example for showing the password and not showing the password we have to change the icon also the event dynamically.

[UdhayaKumar Duraisamy]

You can toggle the TextBox type between password and text and change the eye icon based on the type in the created event, as shown in the code snippet below.

function Multiline() {

  let textareaObj;

  function oncreated() {

    textareaObj.addIcon('append', 'e-icons e-eye-slash');

    var el = document.querySelector('.e-icons');

    el.addEventListener('click', function () {

      if (textareaObj.type == 'text') {

        textareaObj.type = 'password';

        el.classList.replace('e-eye', 'e-eye-slash');

      } else {

        textareaObj.type = 'text';

        el.classList.replace('e-eye-slash', 'e-eye');

      }

    });

  }

  return (

    <div className="control-pane">

      <TextBoxComponent

        id="default"

        type="password"

        floatLabelType="Auto"

        placeholder="Enter your address"

        ref={(scope) => {

          textareaObj = scope;

        }}

        created={oncreated}

      ></TextBoxComponent>

    </div>

  );

}

export default Multiline;

Sample: https://stackblitz.com/edit/react-2ghk7k-uy6y2m?file=index.js