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

  • 相关阅读:
    Siteserver平台搭建
    Android快速入门
    Android Studio/IntelliJ IDEA使用手记
    Nook 2 Root
    Spring 小记
    DeepinXP Lite 6.2 精简版220M 安装IIS
    Rom Modified [Galaxy 3 Tested]
    Windows Thin PC体验 & 语言包更改(win 7 included)
    重装系统后恢复wubi安装的Ubuntu(未实测)
    20180822-Java接口
  • 原文地址:https://www.cnblogs.com/xkzy/p/3946563.html
Copyright © 2011-2022 走看看