webentwicklung-frage-antwort-db.com.de

Platzhalterattribut wird im IE nicht unterstützt. Irgendwelche Vorschläge?

Was verwenden Sie alle, um Platzhalterattribute in Browsern zu unterstützen?

Derzeit verwende ich:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Habe dieses Plugin auch ohne Erfolg ausprobiert:

https://github.com/danbentley/placeholder

Aber es scheint nicht mit IE zu funktionieren ... Genauer gesagt IE 8. Irgendwelche anderen Vorschläge/Alternativen?

Sollte ich das Platzhalterattribut vorerst vergessen?

20

Sie haben Recht, dass IE8 das placeholder-Attribut nicht unterstützt. placeholder ist Teil der HTML5-Spezifikation, und IE8 wurde lange vor der Vorstellung von HTML5 veröffentlicht.

Der beste Weg, um nahtlos damit umzugehen, ist die Verwendung eines Tools wie Modernizr , um zu ermitteln, ob der Browser die Platzhalterfunktion unterstützt, und ein JS-Polyfill-Skript auszuführen, wenn es nicht unterstützt wird.

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

Es gibt zahlreiche Platzhalter-Polyfill-Skripts zum Herunterladen. Wählen Sie eine Option aus, die das placeholder-Attribut verwendet, sodass Sie die Platzhalterzeichenfolge nur an einer Stelle für alle Browser definieren müssen. Hier können Sie versuchen: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Hoffentlich hilft das.

14
Spudley

Hier ist Code aus meinem Projekt, der nativ in Chrome arbeitet und die Polyfill in IE8 verwendet ... Hier gibt es eine Warnung zum Testen, die anzeigt, wann die Polyfill aufgerufen wird. Sie benötigen modernizr als Voraussetzung für die Verwendung dieses Codes. Ein einfaches Skript in Ihrem Abschnitt <head> ist jedoch ausreichend.

<script type="text/javascript">
    $('document').ready(function () {
        if (!Modernizr.input.placeholder) {
            $('[placeholder]').focus(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                    input.removeClass('placeholder');
                }
            }).blur(function() {
                var input = $(this);
                if (input.val() == '' || input.val() == input.attr('placeholder')) {
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                   }
            }).blur();

            $('[placeholder]').parents('form').submit(function() {
                $(this).find('[placeholder]').each(function() {
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                })
            });

            alert("no place holders");
        }
    });
</script>
6
Dylan Hayes

Bei all den anderen Antworten und Beispielen, die ich mir angesehen habe, habe ich einige Probleme gefunden. Ich habe meine eigene Lösung zur Lösung dieser Probleme geschrieben und beschlossen, sie hier zu veröffentlichen. Die zwei Dinge, mit denen mein Code richtig umgehen wird, bei denen die anderen Lösungen Probleme zu haben scheinen, sind:

  1. Wenn Sie tatsächlich den im Platzhalter enthaltenen Text als Wert eingeben möchten, nimmt mein Code nicht an, dass dies der Platzhalter ist, und verwirft Ihre Eingabe.
  2. Wenn Sie im IE auf die Aktualisierungsschaltfläche klicken, werden die Felder nicht automatisch mit den Platzhalterwerten gefüllt.

Fügen Sie Modernizr und JQuery wie folgt hinzu:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

Fügen Sie ein paar CSS hinzu:

<style type="text/css" media="all">
.placeholder {
    color: #aaa;
}
</style>

Dann benötigen Sie den Hauptcode:

<script type="text/javascript">

$(document).ready(function() {

    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {

        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });

        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });

        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});

</script>
2
neelsg

Es gibt einige Polyfill-Skripte für das Platzhalterattribut. Hier ist einer, der gut zu funktionieren scheint .

Denken Sie daran, in Ihrem JS-Code $('input, textarea').placeholder(); aufzurufen, und fügen Sie möglicherweise eine CSS-Regel hinzu, z. .placeholder { color: #aaa }.

2
tuomassalo

Tatsächlich unterstützt keiner der IEs am 19. Oktober 2011 das Platzhalterattribut. Ich habe es in 7, 8 und 9 getestet und keiner von ihnen scheint es zu erkennen. Sie würden denken, dass ie9, da es so aussieht, dass es css3 unterstützen soll und html5 dies behoben hat, aber es scheint nicht so.

Als einfache Problemumgehung, die nicht hübsch ist, aber die Arbeit erledigt, können Sie Javascript wie das folgende verwenden:

<input type="text" value="Enter Zip"
  onfocus="if(this.value == 'Enter Zip'){this.value = '';}" />
1
weexpectedTHIS

Das habe ich in einem meiner Projekte verwendet. Die einzige Sache ist, dass ich nur einen Platzhalter für ein Element benötigte, sodass es für Ihre Situation möglicherweise nicht sofort funktioniert. Um jedoch eine Vorstellung davon zu bekommen, wie einfach der Code ist:

(function(){
    var nameInput = document.getElementById('your-id-here');
    var placeHolderSupport = ("placeholder" in document.createElement("input"));
    if( !placeHolderSupport )
    {
        //show hint in gray
        var placeholder = nameInput.getAttribute('placeholder');
        nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
        nameInput.onblur  = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
        nameInput.onblur();
    }
})()
0
Gerben