HTML5: tipo di input numerico che accetta solo numeri interi?

250

Sto usando jQuery Tools Validator che implementa le convalide HTML5 tramite jQuery. Finora ha funzionato benissimo tranne una cosa. Nella specifica HTML5, il tipo di input "numero" può avere sia numeri interi sia numeri in virgola mobile. Questo sembra incredibilmente miope poiché sarà un validatore utile solo quando i campi del tuo database sono firmati con numeri in virgola mobile (per gli inserimenti non firmati dovrai ricorrere alla convalida "modello" e quindi perdere funzionalità extra come su e giù frecce per i browser che lo supportano). Esiste un altro tipo di input o forse un attributo che limiterebbe l'input a numeri interi senza segno? Non ne ho trovato nessuno, grazie.

MODIFICARE

Ok, ragazzi, apprezzo il vostro tempo e il vostro aiuto, ma vedo molti voti in sospeso immeritati: D. L'impostazione del passaggio su 1 non è la risposta poiché non limita l'input. È ancora possibile digitare un numero a virgola mobile negativo nella casella di testo. Inoltre, sono a conoscenza della validazione del modello (l'ho menzionato nel mio post originale), ma questo non faceva parte della domanda. Volevo sapere se HTML5 consentiva di limitare un input di tipo "numero" a valori interi positivi. A questa domanda la risposta, a quanto pare, sarebbe "no, non è così". Non volevo utilizzare la convalida del modello perché ciò comporta alcuni inconvenienti quando si utilizza la convalida di jQuery Tools, ma ora sembra che la specifica non consenta un modo più pulito per farlo.

jquery  html  validation  jquery-tools 
— JayPea
fonte
3
A partire dal 2019 — non so da quando — l' numberinput (almeno in FF / Chrome / Safari) ora accetta solo numeri interi per impostazione predefinita, a meno che non imposti un valore esplicito per l' stepattr che consenta valori decimali; ad es step="0.01". : . MDN documentato qui . In due menti su questo perché penso che sia un valore predefinito ragionevole, ma anche un cambiamento sostanziale (sì, ha influito su un codice che ho scritto).
— Darragh Enright,

Risposte:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Il meglio che puoi ottenere solo con HTML

<input type="number" min="0" step="1"/>
Espandi frammento

— Aurélien Ooms
fonte
6
Probabilmente si dovrebbe impostare mina 1come vuole numeri positivi (e numeri non non negativi).
— Martin Thoma,
1
@pwdst lo farò secondo. <input type="number" min="0" step="1"/>è la risposta più corretta alla domanda. Ad ogni modo, qual è il punto di avere entrambi step="1"e pattern="\d+"? Non riesco a digitare numeri a virgola mobile in entrambi i casi.
— Ashfaq danese,
27
Questo non ha funzionato per me sull'ultima versione di Chrome. Non consente di digitare lettere, ma consente l'inserimento di caratteri speciali.
— Malavos,
2
Perché posso digitare e in
— grant sun
4
@grantsun per numeri esponenziali, ad es. 10e20.
— sn3ll
181

Impostare l' stepattributo su 1:

<input type="number" step="1" />

Questo sembra un po 'difettoso in Chrome in questo momento, quindi potrebbe non essere la soluzione migliore al momento.

Una soluzione migliore è utilizzare l' patternattributo, che utilizza un'espressione regolare per abbinare l'input:

<input type="text" pattern="\d*" />

\dè l'espressione regolare per un numero, *significa che accetta più di uno di essi. Ecco la demo: http://jsfiddle.net/b8NrE/1/

— js-coder
fonte
2
Come ha appreso JayPea, non tutti i browser supportano ancora tutti gli elementi HTML5, quindi è meglio fornire un gradevole degrado, come hai proposto.
— DOK,
6
La convalida di @Zut HTML5 non ti impedisce di inserire quelle chiavi. Impedisce solo che il modulo venga inviato con quei caratteri. Se invii un modulo con un input del tipo numberche contiene altri caratteri, Chrome ti mostrerà un messaggio di errore.
— js-coder,
2
@dotweb - Vedo il tuo punto. La differenza tra i due è che con l'attributo number, tutti i caratteri alfabetici vengono automaticamente rimossi quando deseleziono (trigger blur) per l'input. Ciò non accade quando si utilizza l'attributo modello. Immagino che questa distinzione sia importante solo se stai usando AJAX per pubblicare i tuoi dati e stai usando qualche altro evento che submitper attivare il post.
— Zut,
6
Ciò non fa ciò che l'OP ha chiesto. Solo numeri interi /\d*/.test(1.1) // true
— vsync l'
2
@vsync pattern="\d*"non è lo stesso che /\d*/, pattern="\d*"è pari a /^(?:\d*)$/, fare riferimento alla HTML5 modello documentazione attributo .
— Wiktor Stribiżew,
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Utilizzando questo codice, l'input nel campo di testo limita l'immissione di sole cifre. Pattern è il nuovo attributo disponibile in HTML 5.

Attributo modello doc

— thejustv
fonte
9
Secondo la specifica, l' attributo modello può essere utilizzato solo se il tipo di input è Testo, Cerca, URL, Telefono, E-mail, Password (come mostrato qui con il tipo "Testo"). Ciò significa che la semantica del tipo di input numerico e quindi (soprattutto) le tastiere sullo schermo numeriche di alcuni tablet e telefoni vengono perse quando si utilizza questo metodo.
— 1414
3
Questo su Firefox 36.0 ti permette di digitare lettere e caratteri speciali.
— Malavos,
1
Non limita l'input solo ai numeri, puoi comunque digitare lettere!
— HadidAli,
35

Il modo semplice con JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
— Tarek Kalaji
fonte
Non capiscoreplace(/(\..*)\./g, '$1')
— codyc4321,
3
Questo è importante per accettare numeri float e ripetere .solo una volta, ad es. 123.556Può essere scritto.
— Tarek Kalaji,
8
@TarekKalaji - domande indica numeri interi e non numeri in virgola mobile
— vsync
che ne dici di dispositivo mobile? perché digita il testo visualizza tutte le tastiere (anche i caratteri alfanumerici)
— Nuri YILMAZ
27

Il pattern è carino ma se vuoi limitare l'input ai numeri solo con type = "text", puoi usare oninput e una regex come di seguito:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Mi sorprende per me :)

— Viktor Karpyuk
fonte
Attenzione che questo approccio potrebbe annullare il metodo (modifica) (gestore eventi) e cancellare anche il valore predefinito nella casella di input.
— HadidAli,
14

Questo non è solo per HTML5, tutto il browser funziona bene. prova questo 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
— Leopard
fonte
12
Questo non va bene. All'ingresso provare: Maiusc + Home, Maiusc + Fine, Ctrl + A, Ctrl + C, Ctrl + V. Usa oninputinvece
— zanderwar,
1
Quando è stata scritta questa risposta, HTML5 non è stato pubblicato. @zanderwar
— Muhammet Can TONBUL
11

Reticolo sono sempre preferibili per restrizione, prova oninpute minverifica 1 per l'inserimento solo numeri da 1 in poi

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
— Noothan yv
fonte
È una soluzione molto istruttiva. Cosa significa `value = $ {var}`?
— Sviluppatore
@AcademyofProgrammer esempio valore predefinito per quell'input
— Shinigamae
migliore risposta! funziona per incollare, funziona anche in IE (10+), ti dà la libertà di visualizzare qualsiasi tastiera tramite il tipo di input e non consente a Chrome di visualizzare queste fastidiose frecce su / giù all'interno del campo.
— Janosch,
5

hai provato a impostare l' stepattributo su 1 in questo modo

<input type="number" step="1" />
— DevTeamExpress
fonte
3

Sì, HTML5 lo fa. Prova questo codice ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

Vedi il paremeter min e max? L'ho provato usando Chrome 19 (funzionava) e Firefox 12 (non funzionava).

— wilsonfoz
fonte
Ciò presuppone che si desideri un intervallo noto. Ma se volessi un valore intero, funzionerebbe comunque?
— RandomHandle
3

Basta inserirlo nel campo di input: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— illeas
fonte
3

Stavo lavorando su Chrome e ho avuto alcuni problemi, anche se utilizzo gli attributi HTML. Ho finito con questo codice js

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
— a.valchev
fonte
Ho finito per usare anche questo con 1 modifica minore; Ho cambiato parseInt (valore) in parseInt (value.replace ('.', ''). Questo mi ha permesso di incollare 1.56 e mantenere il valore visualizzato a 156 anziché a 1.
— codescribblr
2

Dalle specifiche

step="any"o numero a virgola mobile positivo
Specifica la granularità del valore del valore dell'elemento.

Quindi puoi semplicemente impostarlo su 1:

— David Hedlund
fonte
8
Ho provato questo, ma il problema è che puoi ancora digitare un numero in virgola mobile nella casella di testo.
— JayPea,
Quindi, hai bisogno di codice che impedisce all'utente di digitare un punto decimale?
— Blazemonger,
2

Imposta l' stepattributo su qualsiasi numero float, ad es. 0,01 e sei a posto.

— Mantas K.
fonte
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
— Sarthak
fonte
0

Attualmente, non è possibile impedire a un utente di scrivere valori decimali nell'input solo con HTML. Devi usare javascript.

— Michal
fonte
-2

In the Future ™ (vedi Can I Use ), sugli agenti utente che ti presentano una tastiera, puoi limitare un input di testo a solo un numero input[inputmode].

— Weston
fonte
inputmodeè principalmente per i dispositivi portatili e attiverà il layout di tastiera corretto, ma per i computer "normali" con tastiere, non impedirà di inserire ciò che desideri.
— vsync,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.