zoukankan      html  css  js  c++  java
  • IE不支持HTML5表单属性placeholder的解决办法

    1. [代码][JavaScript]代码     

    (function ($) {
        $.fn.placeholder = function (options) {
            var defaults = {
                pColor: "#ccc",
                pActive: "#999",
                pFont: "14px",
                activeBorder: "#080",
                posL: 8,
                zIndex: "99"
            },
            opts = $.extend(defaults, options);
            //
            return this.each(function () {
                if ("placeholder" in document.createElement("input")) return;
                $(this).parent().css("position", "relative");
                var isIE = $.browser.msie,
                version = $.browser.version;
      
                //不支持placeholder的浏览器
                var $this = $(this),
                    msg = $this.attr("placeholder"),
                    iH = $this.outerHeight(),
                    iW = $this.outerWidth(),
                    iX = $this.position().left,
                    iY = $this.position().top,
                    oInput = $("<label>", {
                    "class": "test",
                    "text": msg,
                    "css": {
                        "position": "absolute",
                        "left": iX + "px",
                        "top": iY + "px",
                        "width": iW - opts.posL + "px",
                        "padding-left": opts.posL + "px",
                        "height": iH + "px",
                        "line-height": iH + "px",
                        "color": opts.pColor,
                        "font-size": opts.pFont,
                        "z-index": opts.zIndex,
                        "cursor": "text"
                    }
                    }).insertBefore($this);
                //初始状态就有内容
                var value = $this.val();
                if (value.length > 0) {
                oInput.hide();
                };
      
                //
                $this.on("focus", function () {
                    var value = $(this).val();
                    if (value.length > 0) {
                        oInput.hide();
                    }
                    oInput.css("color", opts.pActive);
                    //
      
                    if(isIE && version < 9){
                        var myEvent = "propertychange";
                    }else{http://www.huiyi8.com/hunsha/lifu/
                        var myEvent = "input";
                    }婚纱礼服欣赏
      
                    $(this).on(myEvent, function () {
                        var value = $(this).val();
                        if (value.length == 0) {
                            oInput.show();
                        } else {
                            oInput.hide();
                        }
                    });
      
                }).on("blur", function () {
                    var value = $(this).val();
                    if (value.length == 0) {
                        oInput.css("color", opts.pColor).show();
                    }
                });
                //
                oInput.on("click", function () {
                    $this.trigger("focus");
                    $(this).css("color", opts.pActive)
                });
                //
                $this.filter(":focus").trigger("focus");
            });
        }
    })(jQuery)
    2. [代码]调用方法:  
    //解决IE下不支持placeholder
    if($.browser.msie) { 
    $(":input[placeholder]").each(function(){
    $(this).placeholder();
    });
    }

  • 相关阅读:
    群辉:服务器错误 错误代码38
    wireshark filter manualpage
    收集下shell使用笔记
    Android kernel LOGO的更换方法
    java实现截屏
    [转]android4.0.3 修改启动动画和开机声音
    博客搬迁
    idea 2017.3创建springboot项目报无效的源发行版: 1.8或者Unsupported major.minor version 52.0的解决方案
    关于mybatis查询集合返回为[null]的问题
    关于mybatis中resultType返回null的问题
  • 原文地址:https://www.cnblogs.com/xkzy/p/3946563.html
Copyright © 2011-2022 走看看