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

标签：placeholder   ie9   ie8   ie7   ie6   

以下代码在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，需要在加载后运行事件。

本文出自 “Kong” 博客，请务必保留此出处http://conrad.blog.51cto.com/1946534/1614677

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

标签：placeholder   ie9   ie8   ie7   ie6   

原文地址：http://conrad.blog.51cto.com/1946534/1614677