Toggle icon

[Keith A Price]

Is there really no built-in way to toggle a textbox icon? 

This seems like a very basic feature. Password textboxes are a prime example. You have an eye open icon and an eye closed icon and you click it to toggle showing the password as text or asterisks.

I did find a forum answer on how to do it with javascript, but I highly recommend you make it a standard feature.

Seems to me you'd just have something like AddIconAsync, which appends an icon class, but UpdateIconAsync to change it, instead.

[UdhayaKumar Duraisamy]

We understand that you are looking for a way to add icons and toggle the visibility of characters in a textbox component. You can use the addIcon
method in the created event of the textbox component to add icons to the textbox. Additionally, to switch between visible and hidden characters, you may change the type from "text" to "password" and vice versa. To toggle the eye icon type, you can use the remove method as demonstrated in the code snippet below.

To better assist you, we have also prepared a sample and shared it below for your reference.

[ Code Snippet ]

var textareaObj = new ej.inputs.TextBox({

  placeholder: 'Enter your Password',

  floatLabelType: 'Auto',

  created: onCreated,

});

textareaObj.appendTo('#default');

 

function onCreated() {

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

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

  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');

    }

  });

}

Sample:  https://stackblitz.com/edit/zzatod-rpfjpx?file=index.js

[Keith A Price]

Is this a Blazor sfTextBox example? It looks like maybe javascript?

If it is Blazor, can you give an example of the razor markup?

And if it's not, can you give me a Blazor example?

[UdhayaKumar Duraisamy]

You can use the below code to dynamically change the visibility of password in Syncfusion blazor TextBox component. Please refer to the below shared code snippet and sample for more information.

[Index.razor]

@page "/"

 

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime

 

<div class="row" style="margin:130px auto;width:300px">

    <SfTextBox ID="passowrdBox" @ref="TextBoxSearchObj" Type=InputType.Password Placeholder="Upload Picture" Created="@onCreateUpload"></SfTextBox>

</div>

@code {

              SfTextBox TextBoxSearchObj;

              public bool Isbool = true;

 

              public async Task onCreateUpload()

              {

                             var OnClick = EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick);

                             await TextBoxSearchObj.AddIcon("prepend", "fa fa-eye", new Dictionary<string, object>() { { "onclick", OnClick } });

              }

 

              public async Task PasswordClick()

              {

                             if(Isbool)

                             {

                                           await JSRuntime.InvokeAsync<object>("visible");

                                           Isbool = false;

                             }

                             else

                             {

                                           await JSRuntime.InvokeAsync<object>("hide");

                                           Isbool = true;

                             }

              }

}

[Script]

function hide()

        {

            document.getElementById('passowrdBox').type = "password";

            document.querySelector('.e-input-group-icon').classList.replace('fa-eye-slash', 'fa-eye');

        }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toggle_Password_TextBox_Blazor932283140