HTML5 五种密码框
【摘要】
<html>
<head>
<meta charset="utf8">
<title>五种密码类型</titl...
<html>
<head>
<meta charset="utf8">
<title>五种密码类型</title>
<style>
body {
font-size: 16px;
}
.container {
border: 1px groove black;
padding: 10px;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=password],input[type=text] {
border-radius: 2px;
border: 1px solid #ccc;
transition: box-shadow .5s;
}
input[type=password]:hover,input[type=text]:hover {
/* 添加边框阴影 */
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
}
#customPwdContainer {
/* 如果这里不声明relative,那么限制不了内部的absolute元素 */
position: relative;
}
#plain5 {
/* 这样才能让2个元素重叠 */
position: absolute;
/* 为了让上边框重合,否则会差一个上边框的宽度 */
top: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<label>普通密码框</label>
<input type="password">
</div>
<div class="container">
<label>带占位符的密码框</label>
<input type="password" placeholder="请输入密码">
</div>
<div class="container">
<label>限制长度的密码框</label>
<input type="password" maxlength="6">
</div>
<div class="container">
<label>可更改可见性的密码框</label>
<input type="password" id="pwd4">
<input type="checkbox" onchange="changePwd4Visible()" id="cb4">是否显示密码
</div>
<div class="container">
<label>自定义密码框</label>
<span id="customPwdContainer">
<!-- 明文 -->
<input type="text" id="plain5">
<!-- 密文 -->
<input type="text" id="pwd5">
</span>
<input type="checkbox" onchange="changePwd5Visible()" id="cb5">是否显示密码
</div>
<script>
var pwd4 = document.getElementById("pwd4");
var cb4 = document.getElementById("cb4");
function changePwd4Visible() {
pwd4.type = event.target.checked ? "text" : "password";
}
var plain5 = document.getElementById("plain5");
var pwd5 = document.getElementById("pwd5");
var cb5 = document.getElementById("cb5");
//如果没有onkeydown,那么一直按着按键不会触发
//onkeydown的时候并不会立马更新value,所以必须有onkeyup
//如果只有onkeydown和onkeyup,那么删除文本不会触发;
plain5.onkeydown = plain5.onkeyup = plain5.onchange = function() {
pwd5.value = plain5.value.replace(/./g, "*");
/*
这里一旦设置selection,那么就把聚焦的对话框转移了.所以输入密文密码时无法显示光标
if(!cb5.checked) {
pwd5.selectionStart = plain5.selectionStart;
pwd5.selectionEnd = plain5.selectionEnd;
}
*/
}
function changePwd5Visible() {
//显示明文,密文框在下层
//显示密文,明文框在上层,透明度为0
plain5.style.opacity = cb5.checked ? 1 : 0;
}
changePwd5Visible();
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/54882467
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）