Show/Hide element on focus/blur

Question

this code snippet shows an animated password input field. If you click in the input field (onFocus) an toggle eye icon appears to show or hide the password. After you leave the input field focus (onBlur) the eye icon disappers. Now my problem is, that the toggle eye icon is not clickable right now. I don't know how to solve his.

Can anybody help me?

Thanks in advance

  function showeye() {
	var string = '<i class="glyphicon glyphicon-eye-open form-control-feedback"></i>';
        	document.getElementById('showhide').innerHTML = string;
      }
 
      function hideeye() { 
	var string = '';
        	document.getElementById('showhide').innerHTML = string;
      }

var $inputItem = $(".js-inputWrapper");
  $inputItem.length && $inputItem.each(function () {
  var $this = $(this),
  $input = $this.find(".formRow--input"),
  placeholderTxt = $input.attr("placeholder"),
  $placeholder;
  
$input.after('<span class="placeholder">' + placeholderTxt + "</span>"),
  $input.attr("placeholder", ""),
  $placeholder = $this.find(".placeholder"),
  $input.val().length ? $this.addClass("active") : $this.removeClass("active"),

  $input.on("focusout", function () {
    $input.val().length ? $this.addClass("active") : $this.removeClass("active");
  }).on("focus", function () {
    $this.addClass("active");
  });
});


// toggle password visibility
$('#password + .glyphicon').on('click', function () {
  $(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
  $('#password').togglePassword(); // activate the hideShowPassword plugin
});

<style>@import url('https://fonts.googleapis.com/css?family=Lato');*,*:before,*:after{box-sizing: border-box;}html,body{display:flex;align-items:center;justify-content:center;}.wrapper{width:400px; max-width:80%;}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<style type="text/css">
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 0.3em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
      .formRow {
  position: relative;
  width: 100%;
}
.formRow--item {
  display: block;
  width: 100%;
}
.formRow--input {
  position: relative;
  padding: 15px 20px 11px;
  width: 100%;
  outline: none;
  border: solid 1px #95989a;
  border-radius: 4px;
  color: #2c3235;
  letter-spacing: .2px;
  font-weight: 400;
  font-size: 16px;
  resize: none;
  transition: all .2s ease;
}
.formRow--input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.formRow--input-wrapper.active .placeholder {
  top: -5px;
  background-color: #ffffff;
  color: #fd999a;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 11px;
  line-height: 14px;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover) ~ .placeholder {
  color: #fec8c9;
}
.formRow--input-wrapper .formRow--input:focus, .formRow--input-wrapper .formRow--input:hover {
  border-color: #fd999a;
}
.formRow .placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  padding: 0 10px;
  color: #95989a;
  white-space: nowrap;
  letter-spacing: .2px;
  font-weight: normal;
  font-size: 16px;
  transition: all, .2s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
   #password + .glyphicon {
   cursor: pointer;
   pointer-events: all;
 }

#wrapper {
  max-width: 500px;
  margin: auto;
  padding-top: 25vh;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.1.1/hideShowPassword.min.js"></script>

<div class="wrapper">
<fieldset class="formRow">
<div class="formRow--item">
<br /><br /><br /><br />
<label for="password" class="formRow--input-wrapper js-inputWrapper">
<div class="form-group has-feedback">
<input type="password" class="form-control formRow--input js-input" name="password" id="password" placeholder="Password" onFocus="showeye();" onBlur="hideeye();">
<div id="showhide"></div>
</div>
</label>
</div>
</fieldset>
</div>

Answer 1

Change your field-icon css to this

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  display: none
}

And add this to your jquery

$("#password-field").focusin(function () {
  $(".field-icon").show();
});

$("#password-field").focusout(function () {
  $(".field-icon").hide();
});

Answer 2

Well you can do something like this. Check if the icon is visible, if Yes -> hide it, else -> show it. And hide it at first in the CSS.

var pswIcon = $(".toggle-password")

$("#password-field").on('focus blur', function() {
  $(pswIcon).is(":visible") ? $(pswIcon).hide() : $(pswIcon).show()
  })

$(pswIcon).click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container{
  padding-top:50px;
  margin: auto;
}

.fa.toggle-password {
  display:none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">

    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">

          <div class="form-group">
            <label class="col-md-4 control-label">Email</label>
            <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label">Password</label>
            <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Answer 3

Check it out once.

/*$(document).ready(function() {

  $('.inputcontainer input').click(function() {
    $(this).parent('.inputcontainer').addClass('show');
    //$('.toggleplaceholder').show();
  });

  $(document).click(function() {
    $('.inputcontainer').removeClass('show');
    //$('.toggleplaceholder').hide();
  });
});*/

$(document).ready(function(){
    
    $('.inputcontainer').click( function(e) {
        
        e.preventDefault(); // stops link from making page jump to the top
        e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
        $(this).addClass('show');
        
    });
    
    $('.toggleplaceholder').click( function(e) {
        
        e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
        
    });
    
    $('html').click( function() {
       
        $('.inputcontainer').removeClass('show');
        
    });
    
});

.toggleplaceholder {
  display: none;
}

.show .toggleplaceholder {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inputcontainer">
  <input type="password" placeholder="password">
  <span class="toggleplaceholder"><i class="fas fa-eye"></i></span>
</div>