显示和隐藏input文本框的内容
表单事件
1、获得焦点 onfocus
2、失去焦点 onblur
<!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, user-scalable=no, minimun-scale=1.0, maxium-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" style="padding: 10px;" class="input1" value="" >
<input type="password" style="padding: 10px;" class="input2" value="">
<div id="fsrid">FSR ID</div>
<div id="mima">密码</div>
<script>
var input1 = document.querySelector('.input1');
var input2 = document.querySelector('.input2');
var fsrid = document.querySelector('#fsrid');
var mima = document.querySelector('#mima');
input1.onfocus = function() {
fsrid.style.display = 'none';
}///当点击input1表单时，获得焦点，fsrid盒子隐藏。
input1.onblur = function() {
if(this.value.length === 0) {
fsrid.style.display = 'block';
}
}///当失去焦点且表单的值的长度为0时，fsrid盒子出现。
input2.onfocus = function() {
mima.style.display = 'none';
}///当点击input1表单时，获得焦点，mima盒子隐藏
input2.onblur = function() {
if(this.value.length === 0) {
mima.style.display = 'block';
}
}///当失去焦点且表单的值的长度为0时，mima盒子出现。
</script>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
