最近项目踩过的坑，不考虑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:;padding:;}
</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>