jquery - 占位符和ie9

Question

为了在 IE 9 中显示占位符，我使用了以下脚本它工作正常，但在刷新后的某些页面中只有它的工作。

var _debug = false;
var _placeholderSupport = function() {
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
}();

window.onload = function() {
    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var curInput = arrInputs[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text")
            HandlePlaceholder(curInput);
    }
};

function HandlePlaceholder(oTextbox) {
    if (!_placeholderSupport) {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "$placeholder";
            oTextbox.onfocus = function() {
                Debug("input box '" + this.name + "' focus");
                this.style.color = this.getAttribute("old_color");
                if (this.value === curPlaceholder)
                    this.value = "";
            };
            oTextbox.onblur = function() {
                Debug("input box '" + this.name + "' blur");
                if (this.value === "") {
                    this.style.color = "$placeholder";
                    this.value = curPlaceholder;
                }
            };
        }
        else {
            Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
        }
    }
    else {
        Debug("browser has native support for placeholder");
    }
}

function Debug(msg) {
    if (typeof _debug !== "undefined" && _debug) {
        var oConsole = document.getElementById("Console");
        if (!oConsole) {
            oConsole = document.createElement("div");
            oConsole.id = "Console";
            document.body.appendChild(oConsole);
        }
        oConsole.innerHTML += msg + "<br />";
    }
}

Answer 1

我建议使用许多经过良好测试的占位符 polyfill 之一。HTML5 请对此也有一些好的建议：http: //html5please.com/#placeholder

Answer 2

试试这个：

if ( !("placeholder" in document.createElement("input")) )
{
    $("input[placeholder]:not([type='password']), textarea[placeholder]").each(function()
    {
        var val = $(this).attr("placeholder");
        if ( this.value == "" )
        {
            this.value = val;
        }

        $(this)
            .focus(function()
            {
                if ( this.value == val )
                {
                    this.value = "";
                }
            })
            .blur(function()
            {
                if ( $.trim(this.value) == "" )
                {
                    this.value = val;
                }
            })
    });
}

$('form')
    .submit(function()
    {
        $(this).find("input[placeholder], textarea[placeholder]").each(function()
        {
            if ( this.value == $(this).attr("placeholder") )
            {
                this.value = "";
            }
        });
    });

Answer 3

/* <![CDATA[ */
$(function() {
var input = document.createElement("input");
if(('placeholder' in input)==false) { 
    $('[placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
            i.val('').removeClass('placeholder');
            if(i.hasClass('password')) {
                i.removeClass('password');
                this.type='password';
            }           
        }
    }).blur(function() {
        var i = $(this);    
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
            if(this.type=='password') {
                i.addClass('password');
                this.type='text';
            }
            i.addClass('placeholder').val(i.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
                i.val('');
        })
    });
}
});
/* ]]> */

使用这个..它真的有效！

Answer 4

试试这个：

$(文档).ready(函数(){

$('.ie9 input, .ie8 input').each(function(index){
    $(this).val($(this).attr('placeholder'));
});

$('.ie9 input, .ie8 input').focusin(function(){
    var val = $(this).val();
    var place = $(this).attr('placeholder');
    if(place == val){
        $(this).val('');
    }
});
$('.ie9 input, .ie8 input').focusout(function(){
    var val = $(this).val();
    if(val == ''){
        $(this).val($(this).attr('placeholder'));
    }   
});

});