使用jQuery解决IE9以下无法支持input的placeholder的问题

来源：互联网发布：翻墙instagram软件编辑：程序博客网时间：2024/05/16 11:31

placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。
要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html

大概的代码如下：

1
2
3
4
5
6
7
<formmethod="post"class="ios_form">
    <inputtype="text"class="text urs-id" placeholder="网易通行证"/>
    <inputtype="text"class="text phone-num" placeholder="手机号码"maxlength="11"/>
    <inputtype="text"class="text code" placeholder="输入验证码"maxlength="6"/>
    <ahref="javascript:;"class="code-img"id="getIosCode">获取验证码</a>
    <ahref="javascript:;"class="submitBtn">提交</a>
</form>

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
varPlaceholer = function(){
    //判断是否支持placeholder
    functionisPlaceholer() {
        return'placeholder' in document.createElement('input');
    }
    //取位置和宽高
    functiongetOffset($obj) {
        varoffset = $obj.offset();
        return{
            left: $obj.position().left,
            top: $obj.position().top,
            wid: $obj.width(),
            hei: $obj.height()
        }
    }
 
    $.fn.extend({
        placeholder:function() {
            if(!isPlaceholer()) {
                $(this).each(function(index, elem) {
                    var$input = $(elem),
                        $label =$('<label class="labelPlaceholder labelPlaceholder' +(index+1)+ '">'+ $input.attr('placeholder') + '</label>'),
                        offset = getOffset($input),
                        styleParams = {
                            'width': offset.wid,
                            'height': offset.hei,
                            'position':'absolute',
                            'left': offset.left,
                            'top': offset.top
                        };
 
                    if($input[0].nodeName === 'INPUT'){
                        styleParams.lineHeight = offset.hei + 'px';
                        var_index = $input.index('input')+1,
                            _className = '.labelPlaceholder'+_index;
                    }else{
                        var_index = $input.index('textarea')+1,
                            _className = 'labelTextAreaPlaceholder'+_index;
                        $label.addClass(_className);
                        _className = '.'+ _className;
                    }
 
                    $input.parent().find(_className).remove();
                    $input.after($label);
                    $label.css(styleParams);
 
                    if($input.val() != '') {
                        $label.hide();
                    }
 
                    $label.click(function() {
                        $input.focus();
                    })
 
                    $input.on('input propertychange',function() {
                        if($(this) .val() == '') {
                            $label.show();
                        }else{
                            $label.hide();
                        }
                    }).on('blur',function() {
                        if($(this).val() == "") {
                            $label.show();
                        }
                    })
                });
            }
        }
    })
}();
 
 
$('.ios_form input').Placeholer();

0 0