代码改动如下,
加了注释~~~~
Input兼容提示#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;}
帐号:
请输入帐号
密码:
请输入密码
;(function () {
var doc = document;
//获取页面上所有的input元素
var inputArr = doc.getElementsByTagName('input');
//显示隐藏方法
var exchangeFun = function (that,display) {
//获取该input元素同级兄弟元素label
var labelArr = that.parentNode.getElementsByTagName('label');
//循环判断label元素className为placeholder的元素
for(var i = 0, len = labelArr.length; i < len; i++){
if(labelArr[i].className == 'placeholder'){
//判断是否有值
if(that.value == ''){
labelArr[i].style.display = display;
}else{
labelArr[i].style.display = 'none';
}
}
}
};
//循环给每个input元素绑定事件
for(var i = 0, len = inputArr.length; i < len; i++){
//聚焦事件
inputArr[i].onfocus = function () {
//this指代这个元素本身
exchangeFun(this,'none');
};
//失焦事件
inputArr[i].onblur = function () {
exchangeFun(this,'block');
};
}
}());