开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性，但是这个属性是html5中的，所以低版本的IE浏览器不支持。于是在百度找了一些解决方法，找了好几个都不是那么完美，最后决定将其中的一个拿来完善一下。
完善后的代码如下：
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 | jQuery.fn.placeholder =function(){vari = document.createElement('input'),placeholdersupport ='placeholder'ini;if(!placeholdersupport){varinputs = jQuery(this);inputs.each(function(){varinput = jQuery(this),text = input.attr('placeholder'),pdl = 0,height = input.outerHeight(),width = input.outerWidth(),placeholder = jQuery('<span class="phTips">'+text+'</span>');try{pdl = input.CSS('padding-left').match(//d*/i)[0] * 1;}catch(e){pdl = 5;}placeholder.css({'margin-left': -(width-pdl),'height':height,'line-height':height+"px",'position':'absolute','color':"#cecfc9",'font-size':"12px"});placeholder.click(function(){input.focus();});if(input.val() !=""){placeholder.css({display:'none'});}else{placeholder.css({display:'inline'});}placeholder.insertAfter(input);input.keydown(function(e){placeholder.css({display:'none'});});input.keyup(function(e){if(jQuery(this).val() !=""){placeholder.css({display:'none'});}else{placeholder.css({display:'inline'});}});});}returnthis;}; |
其中第33到35行代码是我加上去的，原来的代码可以用，但是键入的时候提示内容隐藏有点反应慢，分析代码后发现是对keyup引起了，增加keydown后就几近完美了。
使用时将上面的代码保存为placeholder.jquery.js.
用法：
首先引入jquery
| 1 | <scriptsrc="//Ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
然后引入我们的插件
| 1 | <script src="/js/placeholder.jquery.js"></script> |
最后写上调用代码就可以了
| 12345 | <script>$(document).ready(function(e) {$('input[placeholder]').placeholder();});</script> |
代码参考：http://blog.163.com/yhwwen@126/blog/static/17046885320
新闻热点
疑难解答
