做有态度的前端团队

网易FEG前端团队

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

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

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif