京东密码框隐藏与显示"/>
京东密码框隐藏与显示
效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 300px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 270px;height: 30px;border: 0;outline: none;}.box img {position: absolute;width: 24px;top: 3px;right: -6px;}</style>
</head><body><div class="box"><label for=""><img src="images/隐藏.png" alt="" class="eye"></label><input type="password" class="psd"></div><script>var psd = document.querySelector('.psd');var eye = document.querySelector('.eye');var flag = 0;eye.onclick = function() {if (flag == 0) {psd.type = "text";eye.src = "images/查看.png"flag = 1;} else {eye.src = "images/隐藏.png"psd.type = "password";flag = 0;}}</script>
</body></html>更多推荐
京东密码框隐藏与显示
发布评论