Show / Hide Password

Help Center Get Answers
1

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!

tagged

2

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

2 Likes
3

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
4

Nice one Ian, this is definitely one of those solutions I didn’t know I needed until I saw it :+1:

1 Like