Geben Sie Platzhalter für Internet Explorer ein

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.

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.

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.

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

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.

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

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 :)');

Mit dieser Methode habe ich eine recht einfache Lösung gefunden:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Es ist ein JQuery-Hack und hat bei meinen Projekten perfekt funktioniert

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);

Einfach so:

$(function() {
    ...

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

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

    ...
});

Ich habe ein JQuery-Plugin geschrieben, um dieses Problem zu lösen. Es ist kostenlos.

JQuery-Verzeichnis:

http://plugins.jquery.com/project/kegles-jquery-placeholder

Website: www.kegles.com.br/jquery-placeholder/

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

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.

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>

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>

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.

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.

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/