Mostra tastiera numerica a iPhone utilizzando il testo di input

Question

Si noti che usando input type="number" può visualizzare una tastiera numerica, come di seguito:

E 'possibile utilizzare input type="text" per visualizzare la stessa tastiera numerica? I non non desidera visualizzare un tastierino numerico utilizzando pattern="\d*" perché è possibile che il valore conterrà una posizione decimale.

La ragione per cui mi piacerebbe utilizzare input type="text" anziché input type="number" è che non riesco a recuperare il valore se inserisco un non numero per un campo numerico. Ad esempio, se immetto ABC, diventerà automaticamente vuoto. Mi sembra che usare input type="text" sarà più facile per questo tipo di controllo.

Answer 1

Non riuscivo a trovare alcuna soluzione per quello al momento.

Ma un possibile trucco che potresti fare è usare type = "number" e cambiarlo in javascript con document.getElementById ("elemento"). Type = "text";

ma tuttavia questo potrebbe anche cancellare l'ABC ma sarebbe accettare numeri virgole decimali

Answer 2

Ci sono altri tipi che possono visualizzare la tastiera numerica.

Con type = "numero" non puoi fare nulla. Non accetterà nulla se non i numeri. Ma se usi type = "tel", è un brutto trucco, ma funziona.

Ecco il mio esempio di codice di avviamento postale:

<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6"> 

Ci sarà comunque un problema con tasto "-" su alcune tastiere schermo, è possibile aggirare il problema con l'aggiunta del trattino dopo il numero di caratteri specificati in JavaScript così:

// Zip Code dashes 
$('input[type="tel"].zipCode').keyup(function(event) { 
    var t = event.target, v = t.value; 
    if (v.length == 2) { t.value = v + '-'; } 
}); 

(Si prega di scusare jQuery). Invece di usare type = "tel" puoi usare type = "text" e la proprietà pattern, ma non l'ho ancora testata. Molto probabilmente non funzionerebbe con la maggior parte dei browser.

Answer 3

Se l'input è un numero vero, intero o decimale, utilizzare l'input HTML5 type="number". Questo farà apparire la tastiera corretta sui dispositivi Android (si presuma anche il telefono Windows).

Quindi il trucco è di posizionare un pattern="[0-9]*" su quell'attributo per forzare lo speciale tastierino numerico su iOS. Si noti che:

1. Questo non segnerà un decimale o meno firmare come non valido perché l'attributo modello è actualy non validi su un campo = "numero" di tipo! e
2. Questo è il SOLO modo per ottenere la tastiera numerica iOS. Guarda la differenza tra la sezione numero della tastiera alfa (come nella tua schermata qui sopra) rispetto alla tastiera numerica vera.

Un'ultima nota, assicurarsi di non utilizzare il campo numero del tipo per gli ingressi che non sono veri e propri numeri (ad es. Zipcodes con zeri o codici prodotto con coma o spazi). Un campo di inserimento numerico NON PU SUB INVIARE valori che non sono numeri veri! (a seconda del browser/dispositivo)

Answer 4

Prova questo workarround. Ha funzionato per me

Trasformerà il tipo in numero, quindi tornerà al testo. Questo costringerà iOS a passare alla tastiera numerica sul primo cambio di scena. Il setSelectionRange serve per selezionare il valore di input.

$(function(){ 

    $("input[type='text']").on('mouseup', function(e){ 
     e.preventDefault(); 
    }); 

    $("input[type='text']").on('focus click', function(e){ 
     $(this).prop('type', 'number'); 
     var obj = $(this); 
     setTimeout(function(){ 
      obj.prop('type', 'text'); 
      document.getElementById(obj.attr('id')).setSelectionRange(0, 9999); 
     }, 50);  
    }); 
}); 

Answer 5

uso di questo codice:

<input type="number" pattern="[0-9]*" />