HTML5表单提示placeholder属性兼容IE

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

placeholder 属性是 HTML5 中的新属性。

由于它是html5新增的属性，所以在IE低版本中并不被支持，但是为了兼容IE，我们可以实现在文本框上面浮动一个span标签模拟html5的功能！代码实现如下

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="copyright" content=""/>
    <title>表单提示</title>
    <body>
    <div class="" style="width:100px;height:30px;">
       <input type="text" name="" id="ss" style="width:100px;height:30px;"/>
     </div>
    </body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
var Utils = {
    isIe: !!window.ActiveXObject || 'ActiveXObject' in window,
    isPlaceholder: 'placeholder' in document.createElement('input'),
    initPlaceholder: function($input,msg,json){
        if(this.isPlaceholder && !this.isIe){
            $input.attr('placeholder',msg);
        }else{
            var obj = eval(json);
            if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){
               $input.parent().css("position","relative");//父元素设置相对定位
            }
            $input.removeAttr('placeholder');
            var $tip = $('<span></span>');
            if($input.is(':hidden')){
                $tip.hide();
            }
            $tip.css("position","absolute");
            $tip.css("left",obj.left+'px');
            $tip.css("top",obj.top+'px');
            $tip.css("color",obj.color);
            $tip.text(msg);
            $input.after($tip);
            $.data($input[0],'tip',$tip);
            if($input.val() != ''){
                this.hidePHTip($input);
            }
            this.dealPHTip($input,$tip);
        }
    },
    hidePHTip: function($input){
        var $tip = $.data($input[0],'tip');
        if($tip){
            $tip.hide();
        }
    },
    dealPHTip: function($input,$tip){
        var _deal = function(){
            var val = $input.val();
            if(val == ''){
                $tip.show();
            }else{
                $tip.hide();
            }
        };
        $tip.click(function(){
            $input.focus();
        });
        $input.on('input propertychange',function(){
            clearTimeout(timeout);
            var timeout = setTimeout(_deal,0);
        });
    }
}
 Utils.initPlaceholder($('#ss'),'仅限100字',{top:'10',left:'10',color:'#f00'});
</script>

 提示插件！二次优化

var Utils = {
    isIe: !!window.ActiveXObject || 'ActiveXObject' in window,
    isPlaceholder: 'placeholder' in document.createElement('input'),
    initPlaceholder: function($input,msg,json){
        if(this.isPlaceholder && !this.isIe){
            return;
        }else{
            var obj = eval(json);
            if(!($input.parent().css("position") == 'relative' || $input.parent().css("position") == 'absolute')){
               $input.parent().css("position","relative");
            }
            var _h = $input.height();
            alert(_h);
            var _w = $input.width();
            var $tip = $('<span></span>');
            if($input.is(':hidden')){
                $tip.hide();
            }
            $tip.css({
                'position':'absolute',
                'left':'5px',
                'top':(_h-6)/2 + 'px',
                'font-size':'12px',
                'color':obj.color
            });
            $tip.text(msg);
            $input.after($tip);
            $.data($input[0],'tip',$tip);
            if($input.val() != ''){
                this.hidePHTip($input);
            }
            this.dealPHTip($input,$tip);
        }
    },
    hidePHTip: function($input){
        var $tip = $.data($input[0],'tip');
        if($tip){
            $tip.hide();
        }
    },
    dealPHTip: function($input,$tip){
        var _deal = function(){
            var val = $input.val();
            if(val == ''){
                $tip.show();
            }else{
                $tip.hide();
            }
        };
        $tip.click(function(){
            $input.focus();
        });
        $input.on('input propertychange',function(){
            clearTimeout(timeout);
            var timeout = setTimeout(_deal,0);
        });
    },
    init: function(json){
        $('input[placeholder]').each(function(i){
            Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);
        });
    },
    initHasPar:function(parent,json){
        parent.find('input[placeholder]').each(function(i){
            Utils.initPlaceholder($(this),$(this).attr('placeholder'),json);
        });
    }
}
Utils.init({color:'#ccc'});
//Utils.initHasPar({color:'#ccc'});

 

posted @ 2015-01-21 14:38  史洲宇  阅读(816)  评论(0)  编辑  收藏  举报