兼容ie7以上的 placeholder属性

时间:2021-07-05 04:01:13

最近项目踩过的坑,不考虑ie的可以拐弯绕路走了。

css3的新属性 占位符 placeholder用着多舒服 。

偏偏万恶的ie不支持,网上有几种方法是用焦点事件代替的,不过会失去原有的特性。一旦获取焦点或者失去焦点占位符的文字就会消失。

而placeholder是在输入文字时占位符的文字才会消失

强调一点,此方法只针对 input[type='text'],其他的不支持,比如passwrod

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://s28.9956.cn/static/v3_1/js/jquery.min.js"></script>
</head>
<body>
<input type="" class="clo1" placeholder="电话">
<script type="text/javascript">//'代码保存成一个js文件引用即可。
$(document).ready(function() {
var doc = document,
inputs
= doc.getElementsByTagName('input'),
supportPlaceholder
= 'placeholder' in doc.createElement('input'),

placeholder
= function(input) {
var text = input.getAttribute('placeholder'),
defaultValue
= input.defaultValue;
if (defaultValue == '') {
input.value
= text
}
input.onfocus
= function() {
if (input.value === text) {
this.value = ''
}
};
input.onblur
= function() {
if (input.value === '') {
this.value = text
}
}
};

if (!supportPlaceholder) {
for (var i = 0,
len
= inputs.length; i < len; i++) {
var input = inputs[i],
text
= input.getAttribute('placeholder');
if (input.type === 'text' && text) {
placeholder(input)
}
}
}
});
</script>
</body>
</html>

再列举一个支持passwrod的方法,比较猥琐,用一个label标签把input包起来,里面在加一个标签代替placeholder的文字

先做个样式,定位起来

<style type="text/css">
label
{position: relative;}
label p
{position: absolute;left: 5px;top:0px;margin: 0;padding: 0;}
</style>

 

<label>
<input onfocus="$(this).siblings('p').hide();" onblur="if($(this).val()==''){$(this).siblings('p').show();}" type="password" class="psw">
<p style="display: block;">请输入密码</p>
</label>

上面用的js方法写的,写到标签里的,大家喜欢jquery的写法的话,请看下面代码

<script type="text/javascript">
$(
".psw").focus(function(){
$(
"p").hide();
});
$(
".psw").blur(function(){
$(
"p").show();
});
</script>