码迷,mamicode.com
首页 > 编程语言 > 详细

【JavaScript】允许IE8使用placeholder

时间:2015-09-15 10:51:56      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

    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; //- wp.top;
                        var left = ep.left; //- wp.left;
                        var height = $element.height() - 2;

                        $fakePlaceholder.css({
                            ‘top‘: top + ‘px‘,
                            ‘left‘: left + ‘px‘,
                            "height": height + "px",
                            "line-height": height + "px"
                        });
                        $fakePlaceholder.show();

                    } else {
                        $fakePlaceholder.hide();
                    }
                };


                showFakePlaceholderIfNoText();

            }, 0);

        } else {
            $element.attr("placeholder", text || "");
        }

    }

  

【JavaScript】允许IE8使用placeholder

标签:

原文地址:http://www.cnblogs.com/lhp2012/p/4809463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!