Show / Hide Password

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!



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) {

  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> 
    if ($('#' + iconID).length === 0) {

    // 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.

Knack Pros


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!


1 Like

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

1 Like