Il segnaposto HTML5 scompare a fuoco

Esiste un plug-in jQuery liberamente disponibile che modifica il comportamento dei placeholder in modo che corrisponda alle specifiche HTML5?

Prima di Focus
segnaposto unfocused cromato

On Focus Good (Safari)
segnaposto mirato al safari

On Focus Bad (Chrome, Firefox)
segnaposto focalizzato al cromo

Puoi fare ciò che il tuo browser fa con questo semplice violino .

Le specifiche della bozza HTML5 dicono :

I programmi utente dovrebbero presentare questo suggerimento all’utente, dopo averne interrotto le interruzioni di riga, quando il valore dell’elemento è la stringa vuota e / o il controllo non è focalizzato (ad es. Visualizzandolo all’interno di un controllo vuoto sfocato e nascondendolo altrimenti).

Il “/ o” è nuovo nella bozza corrente quindi suppongo sia per questo che Chrome e Firefox non lo supportano ancora. Vedi bug # 73629 di WebKit, bug # 103025 di Chromium .

Stefano etichette

Stefano J. Attardi ha scritto un bel plugin jQuery che fa proprio questo.
È più stabile di Robert e sfuma anche di un grigio più chiaro quando il campo viene messo a fuoco.

  • Vedi la pagina demo
  • Prendilo su GitHub
  • Gioca con il violino

Ho modificato il suo plugin per leggere l’attributo placeholder invece di creare manualmente uno span .
Questo violino ha il codice completo:

HTML

  

JS

 // Original code by Stefano J. Attardi, MIT license (function($) { function toggleLabel() { var input = $(this); if (!input.parent().hasClass('placeholder')) { var label = $(' 

CSS

 .placeholder { background: white; float: left; clear: both; } .placeholder span { position: absolute; padding: 5px; margin-left: 3px; color: #999; } .placeholder input, .placeholder textarea { position: relative; margin: 0; border-width: 1px; padding: 6px; background: transparent; font: inherit; } /* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */ @media screen and (-webkit-min-device-pixel-ratio:0) { .placeholder input, .placeholder textarea { padding: 4px; } } 

Robert Nyman discute il problema e documenta il suo approccio nel suo blog .
Questo violino che ha tutto il necessario HTML, CSS e JS.

inserisci la descrizione dell'immagine qui

Sfortunatamente, risolve il problema cambiando value .
Questo non funzionerà per definizione se il testo placeholder è di per sé un input valido.

Ho trovato questa domanda cercando la soluzione allo stesso problema. Sembra che i plugin esistenti non funzionino nei browser più vecchi o nascondano il segnaposto sullo stato attivo.

Così ho deciso di lanciare la mia soluzione mentre cercavo di combinare le parti migliori con i plugin esistenti.

Puoi verificarlo qui e aprire un problema in caso di problemi.

Che ne dici di qualcosa di semplice come questo? A fuoco, salva il valore dell’attributo segnaposto e rimuovi interamente l’attributo; su sfocatura, riporta l’attributo:

 $('input[type="text"]').focus( function(){ $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder"); }); $('input[type="text"]').blur( function(){ $(this).attr("placeholder",$(this).attr('data-placeholder')); }); 

Ho scritto la mia unica soluzione per css3. Vedi se questo soddisfa tutte le tue esigenze.

http://codepen.io/fabiandarga/pen/MayNWm

Questa è la mia soluzione:

  1. l’elemento di input è impostato su “required”
  2. è necessario un elemento di estensione aggiuntivo per il segnaposto. Questo elemento viene spostato sopra l’elemento di input (posizione: assoluto;)
  3. con i selettori CSS l’elemento di input viene testato per la validità (i campi obbligatori non sono validi finché non vi è alcun input) e il segnaposto viene nascosto.

Trappola: il segnaposto sta bloccando gli input del mouse! Questo problema viene aggirato nascondendo l’elemento segnaposto quando il mouse si trova all’interno del genitore (wrapper).

 
Hier text
.placeholder { display: none; position: absolute; left: 0px; right: 0; top: 0px; color: #A1A1A1; } input:invalid + .placeholder { display: block; /* show the placeholder as long as the "required" field is empty */ } .wrapper:hover .placeholder { display: none; /* required to guarantee the input is clickable */ } .wrapper{ position: relative; display: inline-block; }

Forse puoi provare con Float Label Pattern 🙂

Vedi le etichette Float nel CSS