zastępczy tekst na input type = „number” nie pokazuje w WebKit ICS

Question

Mam następujące pola wprowadzania

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

zastępczy przedstawiono w normalnych przeglądarkach z wyjątkiem Android 4.0 i wyżej, a szerokość także uzyskać zmniejszona w porównaniu do innych pól.
Co może być błędem?

Answer 1

To jest known bug w domyślnej przeglądarce Android Webkit. Jak na this QuirksMode page widać, że wiele wersji Androida cierpi z tego powodu. Z drugiej strony Chrome na Androida nie.

Dla tego stworzyłem prostą korektę JavaScript. Najpierw przeczytaj to pytanie How to display placeholder's text in HTML5's number-typed input, jeśli nadal chcesz użyć takiego zastępczego obiektu, złóż zamówienie my solution gist.

TL; DR;

Pozostaw swoją adnotację, jak można się spodziewać;

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

Następnie uruchom jeden z tych skryptów po załadowaniu strony;

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

Korzystając type = „tel«zamiast type = «number» symbol zastępczy jest wyświetlany i klawiatura numeryczna jest otwarty na ostrości.

Answer 3

miałem ten sam problem i mój roztwór ustawienie» wpisz "pole jako tekst." Myślę, że dzieje się tak z powodu właściwości type. Tekst zastępczy nie jest liczbą! Jeśli musisz wymusić na użytkowniku używanie tylko formatu liczb, możesz użyć wtyczek javascript dla tego i zrobiłem to w ten sposób:)

Answer 4

spróbuj tego:

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