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 || "");
            }
    
        };
  • 相关阅读:
    ES6--Promise讲解
    JavaScript原型链以及Object,Function之间的关系
    webpack中利用require.ensure()实现按需加载
    js中cssText批量修改元素样式
    js判断数组中是否有重复元素
    vue生命周期小总结
    学习vue生命周期
    [异步请求]ajax、axios、fetch之间的详细区别以及优缺点
    [Es6]原生Promise的使用方法
    [javascript]原生js实现Ajax
  • 原文地址:https://www.cnblogs.com/lhp2012/p/4809463.html
Copyright © 2011-2022 走看看