【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; //- 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 || "");
        }

    }

  

时间: 2024-08-06 09:01:47

【JavaScript】允许IE8使用placeholder的相关文章

IE8兼容placeholder的方案

用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案 如图: placeholder是常用的属性,它使得input框内有很友好的提示效果.高版本浏览器都支持placeholder属性,但IE9以下版本的浏览器并不支持这一属性.这里用JavaScript实现添加对浏览器

关于 href=&quot;javascript:;&quot; 在IE8中的问题

使用<a></a> 标签的时候 有时候会用到 <a href="javascript:;"> </a> 但是在IE8 浏览器中  默认的href="javascript:;" 也会跳转出错, 所以若是考虑到IE8浏览器问题  最好不用href="javascript:;"

【Javascript】IE8兼容 背景图片与a标签的onclick事件

先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在中国有很大的使用人群.既然是中国人自己埋下的坑,咬着牙也要走下去. a标签的onclick事件 在开发现在这个平台时,用的是国产dwz开源前端框架,还是挺好用的,对IE的兼容性做的也比较好,很少发现有啥大问题. 只是如开头标题所示,页面弹出提醒框时,[确定]按钮点不了,导致页面相当于死机一样,只能重

IE6,IE7,IE8,IE9 placeholder 属性修正

以下代码在IE6-9里效果与chrome和FF效果一样. 值更改时placeholder隐藏 /*  * jQuery placeholder   * Fix for Html Input placeholder attribute in IE(6,7,8,9)  * @author Kong  * @Time 2015-02-13  *  * 使用方法 JPlaceHolder.init();  *  */ var JPlaceHolder = {     //Check if the bro

javascript 在ie8中报&ldquo;缺少标识符、字符串或数字&ldquo;问题再现:

开发和测试使用Chrome浏览器比较多,客户反馈某个页面打不开,自己用Chrome打开一切正常,用ie8打开,果然页面展现卡在那儿了,并且报了"缺少标识符.字符串或数字".查看是在knockout中报的错. 碰到这个问题,直接google查ie8 的这个错误,得到最多的结果是ie6.ie7中,json如果最后多一个逗号,就会出现这个异常.赶紧回头查询自己的代码中是否有这样的问题.逗号倒是没发现这种写法,分号倒是有几个结尾没写,顺手改了.甚至把代码复制到http://jsfiddle.n

【Javascript】 IE8兼容性问题汇总

本章是在网页开发过程中所碰到的IE8兼容性问题做一个汇总. 尼玛太坑了,屡次踩坑,总是没记性.而且更坑的是IE8的开发者工具太难用了,想调试都调试不出来. 不得已只好记录下来,下次出问题了好方便排查. JS脚本中,必须遵循以下规则,否则都将导致JS脚本在IE8 错误. 1.所有js脚本的语句结束之后,必须以分号结束. 2.数组(Array)对象声明或赋值时,注意不能有多余的逗号(,)如: var arrNum = [1,2,4,]; var arrStr = [ {key:1}, {key:2}

placeholder在IE8中兼容性问题解决

placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE10以下的版本中. 第一种方法是在页面中添加下面一段脚本: <script type="text/javascript"> if( !('placeholder' in document.createElement('input')) ){ $('input[placeholde

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

如有雷同,不胜荣幸,若转载,请注明 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 --转载

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTM