HTML5表單提示placeholder屬性兼容IE

時間 2019-11-17

標籤 html5 html 表單提示 placeholder 屬性兼容欄目 HTML5 简体版

原文原文鏈接

placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。javascript

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。css

註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。html

placeholder 屬性是 HTML5 中的新屬性。html5

因爲它是html5新增的屬性，因此在IE低版本中並不被支持，可是爲了兼容IE，咱們能夠實如今文本框上面浮動一個span標籤模擬html5的功能！代碼實現以下java

<!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>

提示插件！二次優化jquery

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'});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。