基于jquery 的插件,让IE支持placeholder属性

开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性，但是这个属性是html5中的，所以低版本的IE浏览器不支持。于是在百度找了一些解决方法，找了好几个都不是那么完美，最后决定将其中的一个拿来完善一下。

完善后的代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

jQuery.fn.placeholder = function(){     var i = document.createElement('input'),placeholdersupport ='placeholder' in i;     if(!placeholdersupport){         var inputs = jQuery(this);         inputs.each(function(){             var input = 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'});                     }                 });             });         }     return this; };

其中第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>

最后写上调用代码就可以了

1 2 3 4 5

<script> $(document).ready(function(e) {     $('input[placeholder]').placeholder(); }); </script>

代码参考：http://blog.163.com/yhwwen@126/blog/static/17046885320135915529172/

在此感谢代码作者！