<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密碼顯示隱藏</title>
<style type="text/css">
@charset "UTF-8";
.ml2 {
margin-left: 2rem;
}
.toggle {
background: #ccc;
border-radius: 40em;
cursor: pointer;
display: inline-block;
padding: 1px;
position: relative;
width: 40px;
height: 1.25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
}
.toggle:before, .toggle:after {
color: #777777;
position: absolute;
top: 50%;
-webkit-transform: translatey(-50%);
-ms-transform: translatey(-50%);
transform: translatey(-50%);
}
.toggle:before {
content: "";
font-size: 10px;
right: 110%;
}
.toggle:after {
content: "ABC";
font-size: 12px;
left: 110%;
}
.toggle.is-alpha .toggle-button {
left: 21px;
}
.toggle-button {
background: #fff;
border-radius: 40em;
display: inline-block;
height: 1.25rem;
width: 1.25rem;
position: absolute;
left: 1px;
top: 1px;
-webkit-transition: left 0.05s linear;
transition: left 0.05s linear;
}
.centerer {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centerer">
<p>輸入密碼,點擊右側的開關查看效果</p>
<input type="password" class="password" />
<div class="toggle ml2">
<div class="toggle-button"></div>
</div>
</div>
<script type="text/javascript">
(function () {
$('.toggle').on('click', function () {
var password, type;
password = $('.password');
type = password.attr('type');
if (type === 'password') {
password.attr('type', 'text');
return $(this).addClass('is-alpha');
} else {
password.attr('type', 'password');
return $(this).removeClass('is-alpha');
}
});
}.call(this));
</script>
</body>
</html>給密碼框添加一個顯示隱藏開關
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章