码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-09-10 11:03:27      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:rap   padding   hold   osi   site   query   element   put   self   

 

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 });

 

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

标签:rap   padding   hold   osi   site   query   element   put   self   

原文地址:https://www.cnblogs.com/wm218/p/9617243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!