How to Show Hide Password in the Text Field

Pada saat ganti password atau register member dalam sebuah website, biasanya karakter teks password tidak bisa dilihat. Maka berikut saya contohkan cara supaya bisa terlihat.

Siapkan:
- Animasinya:

dan file tipe svg
- Javascript: hideShowPassword.min.js

<html>
<head>
<style type="text/css">
/*begin: wink*/
::-ms-reveal,
::-ms-clear {
display: none !important;
}
.hideShowPassword-toggle {
background-color: transparent;
background-image: url('../images/wink.png'); /* fallback */
background-image: url('../images/wink.svg'), none;
background-position: 0 center;
background-repeat: no-repeat;
border: 2px solid transparent;
border-radius: 0.25em;
cursor: pointer;
font-size: 100%;
height: 44px;
margin: 0;
max-height: 100%;
padding: 0;
overflow: 'hidden';
text-indent: -999em;
width: 46px;
-moz-appearance: none;
-webkit-appearance: none;
}
.hideShowPassword-toggle-hide {
background-position: -44px center;
}
.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
border-color: #0088cc;
outline: transparent;
}
/*end: wink*/
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<form method="POST" action="">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-8">
<input type="password" required="" name="password" class="form-control" id="password" placeholder="Masukkan password">
</div>
</div>
</fieldset>
</form>
</div>
</div>

<script src="jquery-1.11.0.js"></script>
<script src="hideShowPassword.min.js"></script>
<script type="text/javascript">
//showHidePassword
$('#password').hidePassword(true);
</script>
</body>
</html>

Sumber: cloudfour[dot]github[dot]io

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.