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