使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题

作者: xia 日期: 2016-07-26

177250

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

大概的代码如下：

<form method="post" class="ios_form">
    <input type="text" class="text urs-id" placeholder="网易通行证"/>
    <input type="text" class="text phone-num" placeholder="手机号码" maxlength="11"/>
    <input type="text" class="text code" placeholder="输入验证码" maxlength="6"/>
    <a href="javascript:;" class="code-img" id="getIosCode">获取验证码</a>
    <a href="javascript:;" class="submitBtn">提交</a>
</form>

var Placeholer = function(){
    //判断是否支持placeholder
    function isPlaceholer() {
        return 'placeholder' in document.createElement('input');
    }
    //取位置和宽高
    function getOffset($obj) {
        var offset = $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();