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 browser supports placeholder attribute
    check: function () {
        return ‘placeholder‘ in document.createElement(‘input‘);
    },
    //initLoad
    init: function () {
        if (!this.check()) {
            this.fix();
        }
    },
    //fix
    fix: function () {
        jQuery(‘input[placeholder]‘).each(function () {
            var input = $(this)
            var placeholder = input.attr(‘placeholder‘);
            //It was createed,need to return
            if (input.parent().find("lable").html() != undefined) {
                return;
            }
            input.wrap($(‘<div></div>‘).css({
                ‘position‘: ‘relative‘,
                ‘zoom‘: ‘1‘,
                ‘border‘: ‘none‘,
                ‘background‘: ‘none‘,
                ‘padding‘: ‘none‘,
                ‘margin‘: ‘none‘
            }));

            var position = input.position();
            var holder = $(‘<lable></lable>‘).text(placeholder).css({
                ‘position‘: ‘absolute‘,
                ‘left‘: position.left,
                ‘top‘: position.top,
                ‘margin-left‘:‘7px‘,
                ‘color‘: ‘#aaa‘
            }).appendTo(input.parent());

            holder.click(function () {
                input.focus();
            });
            
            //propertychange attribute support IE9
            input.die("input propertychange").live("input propertychange", function () {
                //input value has change                
                holder.hide();
            }).keyup(function (e) {
                if (e.keyCode == 8 && $.trim(input.val()).length == 0) {
                    holder.show();
                }
            }).blur(function () {
                input.val(delTag(input.val()));
                if (!input.val()) {
                    holder.show();
                }
            });
        });
    }
};

//附带去除空格和html标签
//不需要此方法的时候请删除本文档的第61行
function delTag(str) {
    var str = str.replace(/<\/?[^>]*>/gim, "");//去掉所有的html标记
    var result = str.replace(/(^\s+)|(\s+$)/g, "");//去掉前后空格
    return result.replace(/\s/g, "");//去除文章中间空格
}

注:IE下如果使用了脚本动态加载input,需要在加载后运行事件。

时间: 2024-12-08 10:57:24

IE6,IE7,IE8,IE9 placeholder 属性修正的相关文章

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

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

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

本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

{转}div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_; (4)\9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例: (1)区别FF(IE8)与IE6 IE7 back

JS代码判断IE6,IE7,IE8,IE9!

JS代码判断IE6,IE7,IE8,IE9! 有一种代码: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser

IE6+IE7+IE8+IE9+FF兼容性调试

HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同) 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_; (4)9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例:

一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: 1 <!Doctype html> 2 <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> 3 <head> 4 <meta http-equiv=Content-Type content=