jQuery placeholder, fix for IE6,7,8,9

来源：互联网发布：手机淘宝怎么关注主播编辑：程序博客网时间：2024/06/04 23:06

让支持的直接路过，不支持的，完美显示~~

演示：http://ishere.cn/demo/jquery.jplaceholder/

标签： jQuery

源码与演示：源码出处演示出处

代码片段(2)[全屏查看所有代码]

1. [代码][JavaScript]代码

?
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
/*
 * jQuery placeholder, fix for IE6,7,8,9
 * @author JENA
 * @since 20131115.1504
 * @website ishere.cn
 */
varJPlaceHolder = {
    //检测
    _check : function(){
        return'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        jQuery(':input[placeholder]').each(function(index, element) {
            varself = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
            varpos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
            varholder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();   
});

2. [代码]使用方法

?
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
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>jQuery JPlaceholder Demo</title>
<scriptsrc="jquery-1.8.3.min.js"></script>
<scriptsrc="jquery.JPlaceholder.js"></script>
</head>
 
<body>
<form>
<div>
  <ul>
    <li>
      <inputtype="text"name="username"placeholder="用户名">
    </li>
    <li>
      <inputtype="password"name="username"placeholder="密码">
    </li>
    <li>
      <buttontype="button">登录</button>
    </li>
  </ul>
</div>
</form>
</body>
</html>

阅读全文

0 0