input+label制作兼容IE8的输入提示，实现placeholder效果，下附代码
现在问题是无论点击哪个input总会让第二个input上的label隐藏，请问该如何修改，才能让点击第一个时候第一个label隐藏，点击第二个就隐藏第二个的label？ 求帮助 不胜感激！最近遇到很多这样问题，比如表格中 每行的按钮，如何判断点击的是那一行上的按钮？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Input兼容提示</title>
<style>
#login{margin:100px auto;width: 500px;}
.form-row{padding: 10px 0;position: relative;overflow: hidden;}
.form-row input{height: 30px;float: left;padding-left: 5px;line-height: 30px;width: 300px;border: 1px solid #ddd;}
.form-row .placeholder{color: #C1C0C0;position: absolute;top: 19px;left: 60px;}
.form-row .id-inhead{float: left;height: 33px;width: 50px;line-height: 33px;}
</style>
</head>
<body>
<form id="login">
<div>
<label for="accounts">帐号：</label>
<label for="accounts">请输入帐号</label>
<input type="text" id="accounts">
</div>
<div>
<label for="pass">密码：</label>
<label for="pass">请输入密码</label>
<input type="password" id="pass">
</div>
</form>
<script>
var form=document.getElementById('login');
var odiv=form.getElementsByTagName('div');
var elediv=[];
// 筛选class 名为form-row的节点 存入数组elediv中
for(var i=0,l=odiv.length;i<l;i++){
if (odiv[i].className=='form-row') {
elediv.push(odiv[i]);
}
}
// 遍历form-row节点数组
for(var n=0,m=elediv.length;n<m;n++){
// 获取数组中input节点数组
var input=elediv[n].getElementsByTagName('input');
// 获取数组中label节点数组
var label=elediv[n].getElementsByTagName('label');
// 定义存放 class名为placeholder的label变量 labelp
var labelp;
for(var i=0;i<label.length;i++){
if (label[i].className=='placeholder') {
labelp=label[i];
}
}
// 当input获得焦点时候，labelp隐藏
for(var a=0;a<input.length;a++){
input[a].onfocus=function(){
labelp.style.display="none";
}
}
}
</script>
</body>
</html>
wubin_work0回答
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5