Segnaposto di testo per un input type = "numero" non mostra in WebKit ICS

Question

Ho il seguente campo di input

<input type="number" id="zip-code" placeholder="Zip code" /> 

segnaposto viene visualizzato nei browser normali, tranne Android 4.0 e superiori e la larghezza anche ottenere ridotto rispetto ad altri campi.
Quale potrebbe essere l'errore?

Answer 1

È un known bug nel browser Webkit Android predefinito. Come da this QuirksMode page, puoi vedere che molte versioni di Android ne soffrono. D'altra parte, Chrome per Android non lo fa.

Ho creato un semplice shim JavaScript (correzione) per questo. Per prima cosa, leggi questa domanda How to display placeholder's text in HTML5's number-typed input, quindi se vuoi ancora usare un segnaposto come quello, prova my solution gist.

TL; DR;

Lascia il tuo margine come ti aspetteresti;

<input type="number" placeholder="Enter some numbers" /> 

Quindi eseguire uno di questi script dopo il caricamento della pagina;

// jQuery version 
$("input[type='number']").each(function(i, el) { 
    el.type = "text"; 
    el.onfocus = function(){this.type="number";}; 
    el.onblur = function(){this.type="text";}; 
}); 

// Stand-alone version 
(function(){ var elms = document.querySelectorAll("input"), i=elms.length; 
    while(i--) { 
     var el=elms[i]; if(el.type=="number"]) 
      el.type="text", 
      el.onfocus = function(){this.type="number";}, 
      el.onblur = function(){this.type="text";}; 
    } 
})(); 

Answer 2

Utilizzando type = "tel 'al posto di type = 'numero' viene visualizzato il segnaposto e la tastiera numerica si apre sul fuoco.

Answer 3

Ho avuto lo stesso problema e la mia soluzione è stata l'impostazione' digita "campo come testo. Penso che accada a causa della proprietà type." Il tuo testo segnaposto non è un numero! Se devi forzare l'utente ad usare solo il formato numerico, puoi usare i plugin javascript per questo e l'ho fatto così:)

Answer 4

provare questo:

<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">