<html>
<head>
<style>
.form-group{
position: relative;
width: 50%;
overflow:hidden;
}
.form-group > .toggleMask{
position: absolute;
top: 0;
right: -20px;
text-indent: -30px;
height:100%;
line-height: 2;
pointer-events: auto;
z-index: 5;
cursor: pointer;
}
.form-group > .toggleMask ~ input{
padding-right: 30px;
}
.form-group > .toggleMask:checked::before{
content:"\e105";
}
</style>
<script src=https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1 type="text/javascript"></script>
<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet"/>
</head>
<body>
<div class="form-group">
<input type='checkbox' class="glyphicon glyphicon-eye-close toggleMask"/>
<input type="password" id="data" class="form-control" />
<button onclick="chackdate()"> check </button>
</div>
<script>
document.querySelector('.toggleMask').addEventListener('change', onToggleMaskChange);
function onToggleMaskChange(){
this.nextElementSibling.type = this.checked ? 'text' : 'password'
}
function chackdate(){
var data = document.getElementById("data").value;
alert(data);
}
</script>
</body>
</html>
<head>
<style>
.form-group{
position: relative;
width: 50%;
overflow:hidden;
}
.form-group > .toggleMask{
position: absolute;
top: 0;
right: -20px;
text-indent: -30px;
height:100%;
line-height: 2;
pointer-events: auto;
z-index: 5;
cursor: pointer;
}
.form-group > .toggleMask ~ input{
padding-right: 30px;
}
.form-group > .toggleMask:checked::before{
content:"\e105";
}
</style>
<script src=https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1 type="text/javascript"></script>
<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css rel="stylesheet"/>
</head>
<body>
<div class="form-group">
<input type='checkbox' class="glyphicon glyphicon-eye-close toggleMask"/>
<input type="password" id="data" class="form-control" />
<button onclick="chackdate()"> check </button>
</div>
<script>
document.querySelector('.toggleMask').addEventListener('change', onToggleMaskChange);
function onToggleMaskChange(){
this.nextElementSibling.type = this.checked ? 'text' : 'password'
}
function chackdate(){
var data = document.getElementById("data").value;
alert(data);
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------
Mask and unmask text on onmouseover event in html
<html>
<head>
<script>
function mouseover() {
let obj = document.getElementById('myPassword');
obj.type = 'text';
}
function mouseout() {
let obj = document.getElementById('myPassword');
obj.type = 'password';
}
</script>
<input type="password" name="password" id="myPassword" size="30" onmouseover="mouseover();" onmouseout="mouseout();" />
</body>
</html>
<head>
<script>
function mouseover() {
let obj = document.getElementById('myPassword');
obj.type = 'text';
}
function mouseout() {
let obj = document.getElementById('myPassword');
obj.type = 'password';
}
</script>
<input type="password" name="password" id="myPassword" size="30" onmouseover="mouseover();" onmouseout="mouseout();" />
</body>
</html>