I have been trying to find solution for a while now but with no success. I want to show password on click of an eye icon in my sign up or register page views. Is there a javascript to accomplish this?
Any help from Knack community members will be highly appreciated!
Hi,
Here’s how you could do this.
// Show password on click of eye icon on login and registration forms
// (Note: Uses view-render.any because view-render.form fails to fire on the login form)
$(document).on('knack-view-render.any', function(event, view, data) {
const hasPasswordInput = $('input[name="password"]').length
if (hasPasswordInput) {
showHidePassword()
}
function showHidePassword() {
const $pw = $('input[name="password"]')
// add the icon
const iconID = 'eye-password'
const icon = `
<a id="${iconID}" href="javascript:void(0)" style="position:absolute;right:10px;top:8px;">
<i class="fa fa-eye"></i>
</a>
`
if ($('#' + iconID).length === 0) {
$pw.after(icon)
}
// show/hide password on click of icon
$('#' + iconID).on('click', function() {
$pw.attr('type') === 'password' ? $pw[0].setAttribute('type', 'text') : $pw[0].setAttribute('type', 'password')
})
}
})
This is just a quick prototype. For professional assistance, feel free to reach out anytime.
Ian
Knack Pros
3 Likes
Hi Knack Pros,
Your code works perfectly for me. I do not know how to thank you, please just drop me your email address so that I can engage you in the future!
Thanks
Simon
1 Like
Nice one Ian, this is definitely one of those solutions I didn’t know I needed until I saw it
1 Like