输入框隐藏密码明文
思路:
1.对输入框和按钮进行绑定事件
2.点击按钮,输入框里面的密码能显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框隐藏密码明文</title>
</head>
<body>
<input type="password" name="" id="inp">
<button>显示</button>
<script>
/* 1.对输入框和按钮进行绑定事件
2.点击按钮,输入框里面的密码能显示和隐藏
*/
var inp = document.getElementById("inp")
var btn = document.querySelector("button")
// 给按钮绑定事件类型
var isFlag = 0
btn.onclick = function () {
if (isFlag == 0) {//核心算法,利用isFlag来实现显示和隐藏
inp.type = "teext"
btn.innerHTML = "隐藏"
isFlag = 1
} else {
inp.type = "password"
btn.innerHTML = "显示"
isFlag = 0
}
}
</script>
</body>
</html>