实用的placeholder插件，兼容IE下的placeholder，jquery插件

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30698297

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wm218/p/9617243.html

版权

placeholder在IE下无法兼容，下面的插件很好的处理了这个问题，拿去不谢

 1 /*
 2  * jQuery placeholder, fix for IE6,7,8,9
 3  * @website itmyhome.com
 4  */
 5 var JPlaceHolder = {
 6     //检测
 7     _check : function(){
 8         return 'placeholder' in document.createElement('input');
 9     },
10     //初始化
11     init : function(){
12         if(!this._check()){
13             this.fix();
14         }
15     },
16     //修复
17     fix : function(){
18         jQuery(':input[placeholder]').each(function(index, element) {
19 
20             var self = $(this), txt = self.attr('placeholder');
21             self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
22             var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
23 
24             var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
25             self.focusin(function(e) {
26                 holder.hide();
27             }).focusout(function(e) {
28                 if(!self.val()){
29                     holder.show();
30                 }
31             });
32             holder.click(function(e) {
33                 holder.hide();
34                 self.focus();
35             });
36         });
37     }
38 };
39 
40 //执行
41 jQuery(function(){
42     JPlaceHolder.init();    
43 });