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
