zoukankan      html  css  js  c++  java
  • 【JavaScript】允许IE8使用placeholder

        var placeholder = function ($element) {
    
    
            var $ = window.jQuery;
            var version = parseFloat($.browser.version);
            var isIE8 = $.browser.msie && version < 9;
    
            var text = $element.attr("cm-placeholder") || $element.attr("placeholder");
    
            if (isIE8) {
    
                var $placeholderContainer = $element.closest("div");
                $placeholderContainer.css({"position": "relative"});
    
    
                window.setTimeout(function () {
    
    
                    var getFakePlaceHolder = function () {
                        var cmPlaceholderId = $element.attr("cm-placeholder-id");
                        var $fakePlaceholder;
                        if (cmPlaceholderId && cmPlaceholderId.length > 0) {
                            $fakePlaceholder = $placeholderContainer.find("#" + cmPlaceholderId);
                            if ($fakePlaceholder && $fakePlaceholder.length > 0) {
                                return $fakePlaceholder;
                            }
                        }
    
    
                        var cm_placeholder_id = uniqueId("cm-placeholder-");
                        var fakePlaceholder = '<span id="' + cm_placeholder_id + '" class="cm-placeholder">' + text + '</span>';
                        $fakePlaceholder = $(fakePlaceholder);
                        $placeholderContainer.append($fakePlaceholder);
    
                        $fakePlaceholder.on("click", function (e) {
                            e.stopPropagation();
                            $element.focus();
                        });
    
                        $element.on('focus', function () {
                            $fakePlaceholder.hide();
                        }).on('blur', function () {
                            showFakePlaceholderIfNoText();
                        });
                        $element.attr("cm-placeholder-id", cm_placeholder_id);
    
                        return $fakePlaceholder;
                    };
    
    
                    var $fakePlaceholder = getFakePlaceHolder();
    
    
                    var showFakePlaceholderIfNoText = function () {
                        if ($element.val() === '') {
    
                            var ep = $element.position();
    
                            var top = ep.top+2; //- wp.top;
                            var left = ep.left + 10; //- wp.left;
                            var height = $element.height() - 2;
    
                            $fakePlaceholder.css({
                                'top': top + 'px',
                                'left': left + 'px',
                                "height": height + "px",
                                "line-height": height + "px",
                                "display":"block",
                                "position":"absolute",
                                "color":"#999",
                                "font-size":"12px"
                            });
                            $fakePlaceholder.show();
    
                        } else {
                            $fakePlaceholder.hide();
                        }
                    };
    
    
                    showFakePlaceholderIfNoText();
    
                }, 0);
    
            } else {
                $element.attr("placeholder", text || "");
            }
    
        };
  • 相关阅读:
    Try out the latest C++ compiler toolset without waiting for the next update of Visual Studio
    MAC OS X 系统怎么样?
    java多线程总结
    软件开发的一些概念
    原生JS投票特效
    PHP+MySql例子
    CSS控制文本超出指定宽度显示省略号和文本不换行
    android图片拖动缩放
    jQuery带控制按钮向上和向下滚动文本列表
    HTML5 语义元素
  • 原文地址:https://www.cnblogs.com/lhp2012/p/4809463.html
Copyright © 2011-2022 走看看