placeholder是一个很有用的属性，可以提示用户在input框中输入正确的内容，但是IE8以及IE8一下的浏览器不支持该属性，我们可以使用js来模拟相似的效果。下面直接上代码：
<!doctype html> <html> <header> <meta charset="utf-8"> <title>placeholder</title> <style type="text/css"> *{margin:0;padding:0;} form {margin:50px;} input {display:block;margin:0 0 6px 0;} </style> </header> <body> <form> 用户名：<input name="name" placeholder="请输入用户名"/> 密码：<input name="password" placeholder="请输入登陆密码"/> </form> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ function placeholderSupport() { // 判断浏览器是否支持 placeholder return 'placeholder' in document.createElement('input'); } if(!placeholderSupport()){ $(document).on('focus', '[placeholder]',function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }); $(document).on('blur', '[placeholder]',function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }); $('[placeholder]').blur(); }; }); </script> </body> </html>
'placeholder' in document.createElement('input') ，该行代码利用 in 表达式来判断浏览器中的 input 元素中是否有 placeholder 属性存在。
$('[placeholder]') 是一个Jquery 的属性选择器，选择页面上所有的具有 placheholder 属性的元素。在页面加载完成时我们首先调用 blur() 方法，将所有 input 元素的值 设置 为 input 属性 placeholder 对应的值，从而模拟 placeholder 的效果。
效果如下图所示：
选中 input 时的效果：
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
