标签：
自己写的一个placeholder的模拟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;border:0;outline: none;list-style:none;} body{font-size: 12px;} .inputtext_1{width:200px;height: 16px;line-height: 16px\9;padding: 8px 10px;border:1px solid #ccc;} ul{margin: 100px;} ul li{margin-top: 10px;} </style> </head> <body> <ul> <li> <input type="text" placeholder="用户名" class="inputtext_1" /> </li> <li> <input type="password" placeholder="密码" class="inputtext_1" /> </li> </ul> <script type="text/javascript"> if(typeof placeholder== "undefined" || !placeholder) var placeholder={}; (function(){ placeholder={ check:function(){ return ‘placeholder‘ in document.createElement(‘input‘); }, fix:function(h){ if(!placeholder.check()){ $(‘input[placeholder]‘).each(function (i,v){ var v = $(v),s = $(‘<span>‘+v.attr(‘placeholder‘)+‘</span>‘); $(v).wrap(‘<div style="position:relative;"></div>‘); s.css({ "position":"absolute", //如果传入参数 则以参数为高度 "height":(h||v.outerHeight()), "line-height":v.outerHeight()+"px", "padding-left":parseInt(v.css("padding-left"))+1, "left":0, "top":0, "color":"#a9a9a9" }).insertAfter(v); v.keyup(function(){ if(v.val()!=="") s.hide(); else s.show(); }); s.click(function(){ setTimeout(function(){v.focus();},0) }); }); } } } //如果传入参数 则以参数为高度 placeholder.fix(42); })() </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/anson0415/p/4240274.html
