Telefono: tastiera numerica per l'immissione di testo

C'è un modo per forzare la tastiera numerica a venire al telefono per un <input type="text">? Ho appena capito che <input type="number">in HTML5 è per "numeri in virgola mobile", quindi non è adatto per numeri di carta di credito, codici postali, ecc.

Voglio emulare la funzionalità della tastiera numerica di <input type="number">, per input che accettano valori numerici diversi dai numeri in virgola mobile. C'è forse un altro inputtipo appropriato che lo fa?

Si può fare <input type="text" pattern="\d*">. Ciò farà apparire la tastiera numerica.

Vedi qui per maggiori dettagli: Guida alla programmazione di testi, Web e modifiche per iOS

<form>
  <input type="text" pattern="\d*">
  <button type="submit">Submit</button>
</form>

A partire dalla metà del 2015, credo che questa sia la soluzione migliore:

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

Questo ti darà il tastierino numerico su Android e iOS:

Ti dà anche il comportamento previsto del desktop con i pulsanti freccia su / giù e l'incremento del tasto freccia su / giù intuitivo della tastiera:

Provalo in questo frammento di codice:

<form>
  <input type="number" pattern="[0-9]*" inputmode="numeric">
  <button type="submit">Submit</button>
</form>

Combinando entrambi type="number"e pattern="[0-9]*, otteniamo una soluzione che funziona ovunque. Inoltre, è compatibile con il futuro inputmodeattributo proposto per HTML 5.1 .

Nota: l'utilizzo di un modello attiverà la convalida del modulo nativo del browser. È possibile disabilitarlo utilizzando l' novalidateattributo oppure personalizzare il messaggio di errore per una convalida non riuscita utilizzando l' titleattributo.

Se devi essere in grado di inserire zeri, virgole o lettere iniziali, ad esempio codici postali internazionali, dai un'occhiata a questa leggera variante .

Crediti e approfondimenti:

http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/ http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios- tastiera numerica/

Ho scoperto che, almeno per i campi simili a "passcode", fare qualcosa di simile <input type="tel" />finisce per produrre il campo con il numero più autentico e ha anche il vantaggio di non essere formattato automaticamente . Ad esempio, in un'applicazione mobile che ho sviluppato di recente per Hilton, ho finito con questo:

... e il mio cliente è stato molto colpito.

<form>
  <input type="tel" />
  <button type="submit">Submit</button>
</form>

L'uso di type="email"o type="url"ti darà almeno una tastiera su alcuni telefoni, come iPhone. Per i numeri di telefono, è possibile utilizzare type="tel".

Esiste un pericolo nell'uso del <input type="text" pattern="\d*">per far apparire la tastiera numerica. Su Firefox e Chrome, l'espressione regolare contenuta nel modello fa sì che il browser convalidi l'input per quell'espressione. si verificheranno errori se non corrispondono al modello o se vengono lasciati vuoti. Fai attenzione alle azioni indesiderate in altri browser.

<input type="text" inputmode="numeric">

Con Inputmode puoi dare un suggerimento al browser.

Penso che type="number"sia il migliore per la pagina web semantica. Se vuoi solo cambiare la tastiera, puoi usare type="number"o type="tel". In entrambi i casi, iPhone non limita l'input dell'utente. L'utente può comunque digitare (o incollare) tutti i caratteri che desidera. L'unica modifica è la tastiera mostrata all'utente. Se si desidera qualsiasi restrizione oltre a ciò, è necessario utilizzare JavaScript.

Per me la soluzione migliore era:

Per i numeri interi, che visualizza il pad 0-9 su Android e iPhone

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />

Potresti anche voler fare questo per nascondere i filatori in Firefox / Chrome / Safari, la maggior parte dei clienti pensa che siano brutti

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }

E aggiungi novalidate = 'novalidate' all'elemento del modulo, se stai eseguendo una convalida personalizzata

Ps nel caso in cui volessi davvero numeri in virgola mobile, dopotutto, passa a qualsiasi precisione tu voglia, aggiungerà '. ad Android

<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />

Nel 2018:

<input type="number" pattern="\d*">

funziona sia per Android che per iOS.

Ho testato su Android (^ 4.2) e iOS (11.3)

Puoi provare così:

<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">

Ma fai attenzione: se il tuo input contiene qualcosa di diverso da un numero, non verrà trasmesso al server.

Non sono riuscito a trovare un tipo che funzionasse meglio per me in tutte le situazioni: avevo bisogno di inserire automaticamente i valori numerici (ad esempio "7.5"), ma in certi momenti consentire il testo ("passa" ad esempio). Gli utenti desideravano un tastierino numerico (ad esempio una voce di 7.5), ma era necessario inserire un testo occasionale (ad esempio "passa").

Piuttosto quello che ho fatto è stato aggiungere una casella al modulo e consentire all'utente di alternare il mio input (id = "inputSresult") tra type = "number" e type = "text".

<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>

Quindi ho collegato un gestore di clic alla casella di controllo che alterna il tipo tra testo e numero in base al fatto che la casella di controllo sopra sia selezionata:

$(document).ready(function () {
    var cb = document.getElementById('cbAllowTextResults');
    cb.onclick = function (event) {
        if ($("#cbAllowTextResults").is(":checked"))
            $("#result").attr("type", "text");
        else
            $("#result").attr("type", "number");

    }
});

Questo ha funzionato bene per noi.

 <input type="text" inputmode="decimal">

ti darà l'immissione di testo usando il tastierino numerico

È possibile utilizzare l' inputmodeattributo html:

<input type="text" inputmode="numeric" />

Per maggiori dettagli, consulta il documento MDN su inputmode .

prova questo:

$(document).ready(function() {
    $(document).find('input[type=number]').attr('type', 'tel');
});

consultare: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask