0

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

4 に答える 4

1

これを試して：

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 = "";
            }
        });
    });
于 2013-01-16T09:48:21.237 に答える
1

多くの十分にテストされたプレースホルダー ポリフィルのいずれかを使用することをお勧めします。HTML5 Please にもこれに関する良いアドバイスがあります: http://html5please.com/#placeholder

于 2013-01-16T08:31:57.473 に答える
0

これを試して：

$(document).ready(function(){

$('.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'));
    }   
});

});

于 2014-10-10T18:48:31.683 に答える