Unterstützung von Platzhalterattributen in IE8 und 9

132

Ich habe ein kleines Problem, das placeholderAttribut für Eingabefelder wird in IE 8-9 nicht unterstützt.

Was ist der beste Weg, um diese Unterstützung in meinem Projekt (ASP Net) zu machen. Ich benutze jQuery. Muss ich dafür andere externe Tools verwenden?

Ist http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html eine gute Lösung?

Arbejdsglæde
quelle
7
Pedant's Corner: Es ist ein Attribut, kein Tag. Ein Tag ist mit spitzen Klammern versehen (wie <input>). Ein Attribut ist ein Schlüssel-Wert-Paar in den spitzen Klammern (wie placeholder="This is an attribute value"). Lassen Sie die Frage unverändert, damit zukünftige Personen, die dieselbe Frage stellen, sie finden können.
Paul D. Waite
2
Dieser Link hat nicht so funktioniert wie er ist. Ich habe die zusätzlichen Anführungszeichen um den Selektor $ ("[Platzhalter]") entfernt und es war in Ordnung.
Claptimes
1
Die Lösung in diesem Link behandelt auch keine Passwortfelder gemäß der nativen Unterstützung in Webkit
Geedubb
1
Der Link, den Sie gegeben haben, funktioniert in der Tat sehr gut - abgesehen von Passwörtern ist es ein Vergnügen und könnte nicht einfacher
einzurichten sein
1
Der Link ist eine großartige Lösung
Pixelomo

Antworten:

89

Sie können dieses jQuery-Plugin verwenden: https://github.com/mathiasbynens/jquery-placeholder

Ihr Link scheint aber auch eine gute Lösung zu sein.

roter Alarm
quelle
2
Der in der Frage vorgeschlagene Link hat bei mir nicht funktioniert. Es gab Probleme mit dem Absenden des Formulars. Die Lösung, die Sie in dieser Antwort vorgeschlagen haben, scheint viel robuster zu sein und hat sich bewährt.
Jonny White
Eigentlich habe ich es versucht und es funktioniert einwandfrei - aber sobald ich einen Leuchtkasten mit einem Formular und einem Passwortfeld lade, funktioniert alles, aber nicht das Passwortfeld - es ist einfach leer.
Jurik
6
in meinem IE8 Passwort Platzhalter ist in Punkten
Mladen Janjetovic
Ich kann es auch nicht in ie8 sehen. Ich habe es umgangen, indem ich in ie8 nur einen Text über den Feldern angezeigt habe.
Jhawes
jQuery-Platzhalter verhält sich anders. Es entfernt den Platzhalter im Fokus, anstatt wenn der Benutzer anfängt, etwas in das Feld einzugeben, wie es in Firefox für Platzhalter normal ist.
Supertonsky
89

Sie können eine dieser Polyfüllungen verwenden:

Diese Skripte unterstützen das placeholderAttribut in Browsern, die es nicht unterstützen, und erfordern keine jQuery!

Stareamrainbowlabs
quelle
4
Ich habe dies positiv bewertet, weil ich die Idee einer Nicht-JQuery-Lösung liebe, aber im Moment hat dieser Code Probleme im IE8, sodass er nicht für mich geeignet ist. github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle
3
Diese Lösung behandelt keine Passwortfelder
Jurik
2
@Jurik Ich habe eine zusätzliche Polyfüllung hinzugefügt - ich hoffe es hilft.
Starbeamrainbowlabs
1
Sogar der Distributor dieses Plugins sagt, dass dieses Plugin keine Passwortfelder in <IE9 github.com/jamesallardice/Placeholders.js/issues/…
Jurik
Das Passwortfeld funktioniert in iE8 immer noch nicht. Der akzeptierte Antwortlink scheint in ie8 für das Passwortfeld zu funktionieren.
Susie
24

Die $ .Browser.msie ist nicht mehr auf der neuesten JQuery ... Sie müssen die $ .support verwenden

Wie unten:

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>
Azote
quelle
2
Das funktioniert wie ein Zauber, ich mag es besser als Plugins hinzuzufügen, vielen Dank
LemonCool
@vsync Nein, wenn Sie gut lesen, sagte ich Plugins, Plural, die meisten Optionen, die ich gefunden habe, müssen Sie mehrere Dateien mit Tonnen von Code gegen wenige Zeilen verwenden. Bist du nicht ein bisschen arrogant und wie verbessert dieser Kommentar die Antwort
LemonCool
Dies sollte nicht wirklich verwendet werden. Dies ist für den internen Gebrauch von jQuery bestimmt und kann jederzeit entfernt werden. api.jquery.com/category/deprecated/deprecated-1.9
Will
3

Wenn Sie jquery verwenden, können Sie dies tun. von dieser Seite Platzhalter mit Jquery

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

Dies sind die alternativen Links

  1. Platzhalter-Abfragebibliothek
  2. HTML5-Polyfills - gehen Sie zum Platzhalterabschnitt
Ravi Gadag
quelle
3
Diese Antwort funktioniert, aber Sie müssen dem Link folgen, um die gesamte Funktionalität zu erhalten. Der Code hier alleine funktioniert nicht.
Hawkee
1
ofc es wird nicht funktionieren, das ist ein lächerlicher Code! Warum binden Sie immer wieder das gleiche "Formular" für die submitVeranstaltung? Was hat das
Submit-
Was passiert, wenn ich in IE8 den gleichen Text wie im Platzhaltertext eingebe?
Bimal Das
3

Ich hatte Kompatibilitätsprobleme mit mehreren Plugins, die ich ausprobiert habe. Dies scheint mir die einfachste Möglichkeit zu sein, Platzhalter bei Texteingaben zu unterstützen:

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}
Alex Harper
quelle
unterstützt es IE9?
Viku
2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

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

Versuche dies

Rejeesh Prarath
quelle
1

Ich benutze dieses eine, es ist nur Javascript.

Ich habe einfach ein Eingabeelement mit einem Wert, und wenn der Benutzer auf das Eingabeelement klickt, ändert es es in ein Eingabeelement ohne Wert.

Sie können die Farbe des Textes einfach mit CSS ändern. Die Farbe des Platzhalters ist die Farbe in der ID #IEinput, und die Farbe Ihres eingegebenen Textes ist die Farbe in der ID #email. Sie nicht verwenden getElementsByClassName, da die IE - Versionen, die keine Platzhalter unterstützen, nicht unterstützen getElementsByClassName entweder!

Sie können einen Platzhalter in einer Passworteingabe verwenden, indem Sie den Typ der ursprünglichen Passworteingabe auf Text setzen.

Tinker: http://tinker.io/4f7c5/1 - JSfiddle-Server sind ausgefallen!

*Entschuldigung für mein schlechtes Englisch

JAVASCRIPT

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>
Florislw
quelle
3
Platzhalter sollte zurückkommen, wenn das Feld leer ist und der Fokus verloren geht
Chris Pratt
1

Für andere, die hier landen. Das hat bei mir funktioniert:

//jquery polyfill for showing place holders in IE9
$('[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('');
        }
    })
});

Fügen Sie dies einfach in Ihre script.js-Datei ein. Mit freundlicher Genehmigung von http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

JediCate
quelle
0

Da die meisten Lösungen jQuery verwenden oder nicht so zufriedenstellend sind, wie ich es mir gewünscht habe, habe ich mir einen Ausschnitt für mootools geschrieben.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

Ich gebe zu, dass es ein bisschen MEHR aussieht als andere, aber es funktioniert gut. __placeholder ist eine ccs-Klasse, um die Farbe des Platzhaltertextes hervorzuheben.

Ich habe den fix_placeholder in window.addEvent ('domready', ... und für jeden zusätzlich hinzugefügten Code wie Popups verwendet.

Hoffe du magst es.

Mit freundlichen Grüßen.

Mario
quelle
0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />
user3776645
quelle
0

Fügen Sie den folgenden Code hinzu und es wird getan.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

Laden Sie den vollständigen Code und die Demo von https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip herunter

Ein Mann
quelle
0

Hier ist eine Javascript-Funktion, die Platzhalter für IE 8 und darunter erstellt und auch für Kennwörter funktioniert:

/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e < document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &&
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))
<form id="fm">
  <input type="text" name="email" placeholder="Email">
  <input type="password" name="password" placeholder="Password">
  <textarea name="description" placeholder="Description"></textarea>
</form>

Jeff Baker
quelle
-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>
Ionut Flavius ​​Pogacian
quelle
$ .browser.msie wird nicht mehr unterstützt. Versuchen Sie stattdessen, die Funktionserkennung zu verwenden.
Invot