Inserire segnaposto per Internet Explorer


175

HTML5 ha introdotto l' placeholderattributo su inputelementi, che consente di visualizzare un testo predefinito in grigio.

Purtroppo Internet Explorer, incluso IE 9, non lo supporta.

Esistono già alcuni script simulatore segnaposto. In genere funzionano inserendo il testo predefinito nel campo di input, gli conferiscono un colore grigio e lo rimuovono non appena si focalizza il campo di input.

Lo svantaggio di questo approccio è che il testo segnaposto si trova nel campo di input. Così:

  1. gli script non possono controllare facilmente se un campo di input è vuoto
  2. l'elaborazione lato server deve verificare il valore predefinito, al fine di non inserire il segnaposto nel database.

Vorrei avere una soluzione, in cui il testo segnaposto non si trova nell'input stesso.

Risposte:


151

Guardando la sezione "Web Forms: input segnaposto" di Polyfill HTML5 Cross Browser , uno che ho visto è stato jQuery-html5-placeholder .

Ho provato la demo con IE9 e sembra che ti avvolga in <input>un arco di tempo e sovrapponga un'etichetta con il testo segnaposto.

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

Ci sono anche altri spessori lì, ma non li ho guardati tutti. Uno di questi, Placeholders.js , si pubblicizza come "Nessuna dipendenza (quindi non è necessario includere jQuery, a differenza della maggior parte degli script di polyfill segnaposto)."

Modifica: per coloro che sono più interessati al "come" quel "cosa", come creare un polifillamento segnaposto HTML5 avanzato che accompagna il processo di creazione di un plugin jQuery che lo fa.

Inoltre, vedi Mantieni il segnaposto in primo piano in IE10 per i commenti su come il testo del segnaposto scompare in primo piano con IE10, che differisce da Firefox e Chrome. Non sono sicuro se esiste una soluzione per questo problema.


2
Ha funzionato bene per me in IE7, IE8 e IE9.
Mark Rummel,

2
Quel plug-in non è più gestito e presenta molti problemi noti.
Ian Dunn,

13
Downvote? La risposta conteneva un collegamento ad altri spessori. Aggiornato per includerne uno non jQuery.
Kevin Hakanson,

La pagina github del plugin non esiste più. Eccone un altro .

1
Non troppo grande di un fan che causa la modifica dell'ingresso, ti consiglio di guardare la risposta di Nick qui sotto. utilizza una sovrapposizione trasparente anziché modificare il valore dell'input
Nathan Tregillus,

38

Il migliore della mia esperienza è https://github.com/mathiasbynens/jquery-placeholder (consigliato da html5please.com ). http://afarkas.github.com/webshim/demos/index.html ha anche una buona soluzione tra la sua libreria di polifillamenti molto più ampia.


3
+1 a questo tramite il segnaposto jQuery-html5. Sembra molto più bello e gestisce alcuni casi limite mancati dall'altro (ad esempio campi nascosti)
Andygeers

2
Devo dire che questa volta StackOverflow ha fornito un cattivo consiglio. Il segnaposto jQuery non cancella l'input quando si fa clic su IE.
firedev,

12

Con un'implementazione jQuery è possibile rimuovere FACILMENTE i valori predefiniti quando è il momento di inviare. Di seguito è riportato un esempio:

$('#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

});

So che stai cercando un overlay, ma potresti preferire la facilità di questo percorso (ora sapendo cosa ho scritto sopra). In tal caso, ho scritto questo per i miei progetti e funziona davvero bene (richiede jQuery) e richiede solo un paio di minuti per essere implementato per l'intero sito. Offre inizialmente testo grigio, grigio chiaro quando è a fuoco e nero quando si digita. Offre inoltre il testo segnaposto ogni volta che il campo di input è vuoto.

Innanzitutto imposta il modulo e includi i tuoi attributi segnaposto nei tag di input.

<input placeholder="enter your email here">

Basta copiare questo codice e salvarlo come 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 );

Da usare con un solo input

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

Ecco come ti consiglio di implementarlo in tutti i campi di input sul tuo sito quando il browser non supporta gli attributi segnaposto HTML5:

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

Potresti creare un violino / demo per quanto sopra, aiuterà anche me e il futuro spettatore.
user2086641

Supporta il campo password.
user2681579,

6

Dopo aver provato alcuni suggerimenti e aver riscontrato problemi in Internet Explorer, ecco quello che funziona:

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

Cosa mi è piaciuto: includi solo il file js. Non è necessario avviarlo o altro.


Dopo aver utilizzato questo segnaposto funziona bene, ad esempio, ma se si verifica un errore nel modulo, durante la visualizzazione dell'errore del modulo il testo del segnaposto viene disallineato dal campo di input, ho provato a risolvere ma non sono in grado di farlo. Puoi guidarmi come risolverlo .
user2681579,

Mi piace molto questo rispetto alle versioni di modifica del valore. Vorrei che anche la versione html5 dei segnaposto funzionasse in questo modo! (es. lasciando il segnaposto finché non viene inserito del testo, anziché perdere il valore
attivo

4
  • Funziona solo per IE9 +

La seguente soluzione si lega agli elementi di testo di input con l'attributo segnaposto. Emula un comportamento segnaposto solo per IE e cancella il campo del valore dell'input al momento dell'invio se non viene modificato.

Aggiungi questo script e IE sembra supportare i segnaposto HTML5.

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

1
Molti utenti usano ancora IE8 e alcuni addirittura usano IE7. Quindi non ci
proverei

4

Ti suggerisco una semplice funzione:

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

    element.blur();
}

E per usarlo, chiamalo in questo modo:

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


2

Puoi usare :

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

2

Semplice come questo:

$(function() {
    ...

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

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

    ...
});


1

Ho ideato un semplice script JQuery per segnaposto che consente un colore personalizzato e utilizza un diverso comportamento di cancellazione degli input quando è focalizzato. Sostituisce il segnaposto predefinito in Firefox e Chrome e aggiunge il supporto per 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');
            }
        });
    });
});

saluto perfetto, ma hai un errore (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // buffer cambia questa riga in $ (this) .attr ('tooltip', $ (this) .attr ('placeholder')); // buffer
angel.bonev il

0

Placeholdr è un polyfill jQuery segnaposto drop-in superleggero che ho scritto. È ridotto a meno di 1 KB.

Mi sono assicurato che questa libreria affronta entrambe le tue preoccupazioni:

  1. Placeholdr estende la funzione jQuery $ .fn.val () per impedire valori di ritorno imprevisti quando il testo è presente nei campi di input come risultato di Placeholdr. Quindi, se ti attieni all'API jQuery per accedere ai valori dei tuoi campi, non dovrai cambiare nulla.

  2. Placeholdr è in attesa di invii di moduli e rimuove il testo segnaposto dai campi in modo che il server visualizzi semplicemente un valore vuoto.

Ancora una volta, il mio obiettivo con Placeholdr è di fornire una semplice soluzione drop-in al problema del segnaposto. Fammi sapere su Github se c'è qualcos'altro che ti interesserebbe avere il supporto Placeholdr.


0

PER inserire il plug-in e verificare che ie sia perfettamente lavoratojquery.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>

0

Ecco una pura funzione javascript (non è necessario jquery) che creerà segnaposto per IE 8 e versioni precedenti e funziona anche per le password. Legge l'attributo segnaposto HTML5 e crea un elemento span dietro l'elemento form e rende trasparente lo sfondo dell'elemento form:

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


0

NOTA: l'autore di questo polyfill afferma che "funziona praticamente in qualsiasi browser che si possa immaginare", ma secondo i commenti non è vero per IE11, tuttavia IE11 ha il supporto nativo, così come la maggior parte dei browser moderni

Placeholders.js è il miglior polyfill di segnaposto che abbia mai visto, è leggero, non dipende da JQuery, copre altri browser meno recenti (non solo IE) e dispone di opzioni per segnaposto Nascondi-su-input e Run-Once.


1
@Niclas IE9 e versioni successive hanno il proprio supporto nativo per i segnaposto.
Esodo,

Ho aggiunto una nota a questa risposta con un link a caniuse per i segnaposto.
Dave Everitt,

-1

io uso jquery.placeholderlabels . Si basa su questo e può essere demo qui .

funziona in ie7, ie8, ie9.

il comportamento imita il comportamento attuale di Firefox e Chrome - in cui il testo "segnaposto" rimane visibile sullo stato attivo e scompare solo dopo aver digitato qualcosa nel campo.


-1

Ho creato il mio plug-in jQuery dopo essere diventato frustrato dal fatto che gli spessori esistenti nascondessero il segnaposto in primo piano, il che crea un'esperienza utente inferiore e inoltre non corrisponde al modo in cui Firefox, Chrome e Safari lo gestiscono. Questo è particolarmente vero se si desidera che un input sia focalizzato quando una pagina o un popup vengono caricati per la prima volta, pur mostrando il segnaposto fino all'inserimento del testo.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.