Geben Sie Platzhalter für Internet Explorer ein

175

In HTML5 wurde das placeholderAttribut für inputElemente eingeführt, mit dem ein ausgegrauter Standardtext angezeigt werden kann.

Leider unterstützt der Internet Explorer, einschließlich IE 9, dies nicht.

Es gibt bereits einige Platzhalter-Simulator-Skripte. Sie funktionieren normalerweise, indem Sie den Standardtext in das Eingabefeld einfügen, ihm eine graue Farbe geben und ihn wieder entfernen, sobald Sie das Eingabefeld fokussieren.

Der Nachteil dieses Ansatzes besteht darin, dass sich der Platzhaltertext im Eingabefeld befindet. So:

  1. Skripte können nicht einfach überprüfen, ob ein Eingabefeld leer ist
  2. Die serverseitige Verarbeitung muss mit dem Standardwert verglichen werden, um den Platzhalter nicht in die Datenbank einzufügen.

Ich hätte gerne eine Lösung, bei der der Platzhaltertext nicht in der Eingabe selbst enthalten ist.

NikiC
quelle

Antworten:

151

Beim Betrachten des Abschnitts "Web Forms: Eingabeplatzhalter" von HTML5 Cross Browser Polyfills sah ich einen jQuery-html5-Platzhalter .

Ich habe die Demo mit IE9 ausprobiert und es sieht so aus, als würde sie Ihre <input>mit einer Spanne umschließen und eine Beschriftung mit dem Platzhaltertext überlagern.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </span>
</label>

Es gibt dort auch andere Unterlegscheiben, aber ich habe sie nicht alle angeschaut. Einer von ihnen, Placeholders.js , kündigt sich als "Keine Abhängigkeiten an (daher muss jQuery im Gegensatz zu den meisten Platzhalter-Polyfill-Skripten nicht eingeschlossen werden)."

Bearbeiten: Für diejenigen, die mehr daran interessiert sind, "wie" das "was", wie man eine erweiterte HTML5-Platzhalter-Polyfüllung erstellt, die den Prozess des Erstellens eines jQuery-Plugins durchläuft, das dies tut.

Siehe auch keep Platzhalter auf Fokus in IE10 für Kommentare, wie Platzhalter - Text verschwindet auf Fokus mit IE10, die sich von Firefox und Chrome. Ich bin mir nicht sicher, ob es eine Lösung für dieses Problem gibt.

Kevin Hakanson
quelle
2
Funktionierte gut für mich in IE7, IE8 und IE9.
Mark Rummel
2
Dieses Plugin wird nicht mehr gewartet und hat viele bekannte Probleme.
Ian Dunn
13
Downvote? Die Antwort enthielt einen Link zu anderen Unterlegscheiben. Aktualisiert, um eine Nicht-jQuery-Version einzuschließen.
Kevin Hakanson
Die Github-Seite des Plugins existiert nicht mehr. Hier ist noch einer .
1
Ich bin kein allzu großer Fan, der bewirkt, dass der Eingang geändert wird. Ich empfehle, Nicks Antwort unten zu lesen. Es verwendet eine transparente Überlagerung, anstatt den Wert der Eingabe zu
ändern
38

Das beste meiner Erfahrung nach ist https://github.com/mathiasbynens/jquery-placeholder (empfohlen von html5please.com ). http://afarkas.github.com/webshim/demos/index.html hat auch eine gute Lösung in seiner viel umfangreicheren Bibliothek von Polyfills.

user161642
quelle
3
+1 dazu über den jQuery-html5-Platzhalter. Dies sieht viel besser aus und behandelt einige
Randfälle,
2
Ich muss sagen, dass StackOverflow diesmal einen schlechten Rat gegeben hat. jQuery Placeholder löscht die Eingabe nicht, wenn Sie in IE klicken.
Firedev
12

Mit einer jQuery-Implementierung können Sie die Standardwerte EINFACH entfernen, wenn es Zeit zum Senden ist. Unten ist ein Beispiel:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

   // $.ajax(...  // do your ajax thing here

});

Ich weiß, dass Sie nach einem Overlay suchen, aber vielleicht bevorzugen Sie die Leichtigkeit dieser Route (jetzt wissen Sie, was ich oben geschrieben habe). Wenn ja, dann habe ich dies für meine eigenen Projekte geschrieben und es funktioniert wirklich gut (erfordert jQuery) und die Implementierung für Ihre gesamte Site dauert nur ein paar Minuten. Es bietet zunächst grauen Text, im Fokus hellgrau und beim Tippen schwarz. Es bietet auch den Platzhaltertext, wenn das Eingabefeld leer ist.

Richten Sie zuerst Ihr Formular ein und fügen Sie Ihre Platzhalterattribute in die Eingabe-Tags ein.

<input placeholder="enter your email here">

Kopieren Sie einfach diesen Code und speichern Sie ihn als placeholder.js.

(function( $ ){

   $.fn.placeHolder = function() {  
      var input = this;
      var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
      if (text) input.val(text).css({ color:'grey' });
      input.focus(function(){  
         if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){     
            input.val("").css({ color:'black' });  
         });
      });
      input.blur(function(){ 
         if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
      }); 
      input.keyup(function(){ 
        if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
            input.val("").css({ color:'black' });
        });               
      });
      input.mouseup(function(){
        if (input.val() === text) input.selectRange(0,0); 
      });   
   };

   $.fn.selectRange = function(start, end) {
      return this.each(function() {
        if (this.setSelectionRange) { this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true); 
            range.moveEnd('character', end); 
            range.moveStart('character', start); 
            range.select(); 
        }
      });
   };

})( jQuery );

Nur an einem Eingang verwenden

$('#myinput').placeHolder();  // just one

So empfehle ich Ihnen, es in allen Eingabefeldern Ihrer Site zu implementieren, wenn der Browser keine HTML5-Platzhalterattribute unterstützt:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      
  $.getScript("../js/placeholder.js", function() {   
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 
Jonathan Tonge
quelle
Könnten Sie bitte eine Geige / Demo für das oben genannte erstellen, wird mir und zukünftigen Zuschauern auch helfen.
user2086641
Unterstützt es das Passwortfeld?
user2681579
6

Nachdem Sie einige Vorschläge ausprobiert und Probleme im IE festgestellt haben, funktioniert Folgendes:

https://github.com/parndt/jquery-html5-placeholder-shim/

Was mir gefallen hat - Sie fügen nur die js-Datei hinzu. Keine Notwendigkeit, es oder irgendetwas zu initiieren.

Firedev
quelle
Nachdem ich diesen Platzhalter verwendet habe, funktioniert er einwandfrei, aber wenn ein Formfehler vorliegt, wird der Platzhaltertext beim Anzeigen des Formularfehlers aus dem Eingabefeld falsch ausgerichtet. Ich habe versucht, ihn zu lösen, konnte ihn jedoch nicht ausführen. Können Sie mir zeigen, wie er zu lösen ist? .
user2681579
Ich mag diese Version wirklich besser als die wertmodifizierenden Versionen. Ich wünschte, die HTML5-Version von Platzhaltern würde auch so funktionieren! (dh den Platzhalter verlassen, bis ein Text eingegeben wird, anstatt den Wert im Fokus zu verlieren)
Nathan Tregillus
4
  • Funktioniert nur für IE9 +

Die folgende Lösung bindet an Eingabetextelemente mit dem Platzhalterattribut. Es emuliert ein Platzhalterverhalten nur für den IE und löscht das Wertefeld der Eingabe beim Senden, wenn es nicht geändert wird.

Wenn Sie dieses Skript hinzufügen, scheint der IE HTML5-Platzhalter zu unterstützen.

  $(function() {
  //Run this script only for IE
  if (navigator.appName === "Microsoft Internet Explorer") {
    $("input[type=text]").each(function() {
      var p;
     // Run this script only for input field with placeholder attribute
      if (p = $(this).attr('placeholder')) {
      // Input field's value attribute gets the placeholder value.
        $(this).val(p);
        $(this).css('color', 'gray');
        // On selecting the field, if value is the same as placeholder, it should become blank
        $(this).focus(function() {
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
         // On exiting field, if value is blank, it should be assigned the value of placeholder
        $(this).blur(function() {
          if ($(this).val() === '') {
            return $(this).val(p);
          }
        });
      }
    });
    $("input[type=password]").each(function() {
      var e_id, p;
      if (p = $(this).attr('placeholder')) {
        e_id = $(this).attr('id');
        // change input type so that the text is displayed
        document.getElementById(e_id).type = 'text';
        $(this).val(p);
        $(this).focus(function() {
          // change input type so that password is not displayed
          document.getElementById(e_id).type = 'password';
          if (p === $(this).val()) {
            return $(this).val('');
          }
        });
        $(this).blur(function() {
          if ($(this).val() === '') {
            document.getElementById(e_id).type = 'text';
            $(this).val(p);
          }
        });
      }
    });
    $('form').submit(function() {
      //Interrupt submission to blank out input fields with placeholder values
      $("input[type=text]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
          $(this).val('');
        }
      });
     $("input[type=password]").each(function() {
        if ($(this).val() === $(this).attr('placeholder')) {
           $(this).val('');
        }
      });
    });
  }
});
Alex
quelle
1
Viele Benutzer verwenden immer noch IE8 und einige sogar IE7. Also würde ich das nicht machen, wenn es sie nicht unterstützt
rzr
4

Ich schlage Ihnen eine einfache Funktion vor:

function bindInOut(element,value)
{
    element.focus(function()
    {
        if(element.val() == value) element.val('');         
    }).
    blur(function()
    {
        if(element.val() == '') element.val(value);
    });

    element.blur();
}

Und um es zu benutzen, nennen Sie es so:

bindInOut($('#input'),'Here your value :)');
Alpha
quelle
2

Sie können verwenden:

var placeholder = 'search  here';

$('#search').focus(function(){
    if ($.trim($(this).val()) ===  placeholder){
        this.value ='';
    }
}).blur(function(){
    if ($.trim($(this).val()) ===  ''){
        this.value = placeholder;
    }
}).val(placeholder);
Roy MJ
quelle
2

Einfach so:

$(function() {
    ...

    var element = $("#selecter")
    if(element.val() === element.attr("placeholder"){

        element.text("").select().blur();
    }

    ...
});
Yitzchok Glancz
quelle
1

Ich habe ein einfaches JQuery-Skript für Platzhalter entwickelt, das eine benutzerdefinierte Farbe zulässt und beim Fokussieren ein anderes Verhalten beim Löschen von Eingaben verwendet. Es ersetzt den Standardplatzhalter in Firefox und Chrome und bietet Unterstützung für IE8.

// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () { 
    var textColor = '#777777'; //custom color

    $('[placeholder]').each(function() {
        (this).attr('tooltip', $(this).attr('placeholder')); //buffer

        if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
            $(this).css('color', textColor).css('font-style','italic');
            $(this).val($(this).attr('placeholder')); //IE8 compatibility
        }

        $(this).attr('placeholder',''); //disable default behavior

        $(this).on('focus', function() {
            if ($(this).val() === $(this).attr('tooltip')) {
                $(this).val('');
            }
        });

        $(this).on('keydown', function() {
            $(this).css('font-style','normal').css('color','#000');
        });

        $(this).on('blur', function() {
            if ($(this).val()  === '') {
                $(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
            }
        });
    });
});
mbokil
quelle
perfekte Begrüßung, aber Sie haben einen Fehler (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // Puffer ändere diese Zeile in $ (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // buffer
angel.bonev
0

Placeholdr ist eine superleichte Drop-In-Platzhalter-jQuery-Polyfüllung, die ich geschrieben habe. Es ist weniger als 1 KB minimiert.

Ich habe dafür gesorgt, dass diese Bibliothek Ihre beiden Anliegen anspricht:

  1. Placeholdr erweitert die Funktion jQuery $ .fn.val () , um unerwartete Rückgabewerte zu verhindern, wenn aufgrund von Placeholdr Text in Eingabefeldern vorhanden ist. Wenn Sie sich also an die jQuery-API halten, um auf die Werte Ihrer Felder zuzugreifen, müssen Sie nichts ändern.

  2. Placeholdr wartet auf Formularübermittlungen und entfernt den Platzhaltertext aus den Feldern, sodass der Server einfach einen leeren Wert sieht.

Wieder ist es mein Ziel mit Placeholdr, eine einfache Drop-In-Lösung für das Platzhalterproblem bereitzustellen. Lassen Sie mich auf Github wissen, ob Sie noch etwas an der Unterstützung von Placeholdr interessiert sind.

sffc
quelle
0

Um das Plugin einzufügen und zu überprüfen, ob es perfekt funktioniert, muss jquery.placeholder.js

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.placeholder.js"></script>
    <script>
        // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
        // $.fn.hide = function() { return this; }
        // Then uncomment the last rule in the <style> element (in the <head>).
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            // That’s it, really.
            // Now display a message if the browser supports placeholder natively
            var html;
            if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
            } else if ($.fn.placeholder.input) {
                html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
            }
            if (html) {
                $('<p class="note">' + html + '</p>').insertAfter('form');
            }
        });
    </script>
Senthamizhmani.S
quelle
0

Hier ist eine reine Javascript-Funktion (keine Abfrage erforderlich), die Platzhalter für IE 8 und darunter erstellt und auch für Kennwörter funktioniert. Es liest das HTML5-Platzhalterattribut, erstellt ein span-Element hinter dem Formularelement und macht den Hintergrund des Formularelements transparent:

/* 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
0

HINWEIS: Der Autor dieser Polyfill behauptet, dass sie "in so ziemlich jedem Browser funktioniert, den Sie sich vorstellen können", aber laut den Kommentaren gilt dies nicht für IE11, jedoch hat IE11 native Unterstützung, wie die meisten modernen Browser

Placeholders.js ist die beste Platzhalter- Polyfüllung, die ich je gesehen habe, ist leichtgewichtig, hängt nicht von JQuery ab, deckt andere ältere Browser (nicht nur IE) ab und bietet Optionen für einmal versteckte und einmal ausgeführte Platzhalter.

Dave Everitt
quelle
1
@Niclas IE9 und höher bietet eine eigene native Unterstützung für Platzhalter.
Hexodus
Ich habe dieser Antwort einen Hinweis mit einem Link zu caniuse für Platzhalter hinzugefügt.
Dave Everitt
-1

Ich benutze jquery.placeholderlabels . Es basiert darauf und kann hier vorgeführt werden .

arbeitet in ie7, ie8, ie9.

Das Verhalten ahmt das aktuelle Firefox- und Chrome-Verhalten nach. Dabei bleibt der Text "Platzhalter" im Fokus sichtbar und verschwindet erst, wenn etwas in das Feld eingegeben wurde.

Jaffadog
quelle
-1

Ich habe mein eigenes jQuery-Plugin erstellt, nachdem ich frustriert war, dass die vorhandenen Shims den Platzhalter im Fokus verbergen würden, was zu einer minderwertigen Benutzererfahrung führt und auch nicht mit dem Umgang von Firefox, Chrome und Safari übereinstimmt. Dies ist insbesondere dann der Fall, wenn eine Eingabe beim ersten Laden einer Seite oder eines Popups fokussiert werden soll, während der Platzhalter angezeigt wird, bis Text eingegeben wird.

https://github.com/nspady/jquery-placeholder-labels/

nspady
quelle