-
实现效果
-
核心思路
-
实现代码
<title>点击后明文和密文的切换</title>
<style>
.box {
position: relative;
width: 400px;
margin: 100px auto;
}
em {
display: inline-block;
position: absolute;
top: 10px;
right: 0px;
border: 1px solid #000;
width: 10px;
height: 10px;
}
.box input {
width: 370px;
height: 30px;
}
</style>
</head>
<body>
<!-- 实现：点击空格时，密码框的密文会变成明文
核心：触发事件后，将表单的类型转换为文本形式
-->
<div class="box">
<em></em>
<!-- label和表单搭配使用 -->
<label for=""></label>
<input type="password" name="" id="">
</div>
<script>
// 1.获取元素
var em = document.querySelector('em');
var pwd = document.querySelector('input');
// 2.注册事件，处理程序
// 重点；想要实现点击一次出现明文，再点击一次就变为密文的效果需要添加判断条件
var flag = 0;
em.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
flag = 1;
} else {
pwd.type = 'password';
flag = 0;
}
}
</script>
</body>