Voglio limitare l'input dell'utente ai numeri positivi in un modulo html.Impedisci ingressi negativi nel tipo di input modulo = "numero"?
So che è possibile impostare min = "0", tuttavia è possibile ignorare questo inserendo manualmente un numero negativo.
Esiste un altro modo per risolvere questo problema senza scrivere una funzione di convalida?
Questo non è possibile senza convalidare il valore dell'ingresso.
input type=number
L'elemento con un attributo del tipo cui valore è "numero" rappresenta un preciso controllo per impostare il valore dell'elemento di una stringa rappresenta un numero.
Poiché è una stringa che rappresenta il numero, non è possibile garantire che la stringa possa rappresentare valori numerici o meno.
Gli attributi consentiti non ti daranno la possibilità di convalidare il valore del controllo di immissione del numero.
Un modo per farlo con l'aiuto di JavaScript potrebbe assomigliare a questo.
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function(){
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)<input type="number" min="0" />Se state programmando su inviare i dati a un server assicuratevi di convalidare i dati sul server pure. Il lato client JavaScript non può garantire che i dati inviati siano quelli che ci si aspetta che siano.
Il seguente script consentirà l'immissione di numeri o di un backspace nell'input.
var number = document.getElementById('number');
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}<input type="number" id="number" min="0">Questo è troppo restrittivo in quanto non consente all'utente di uscire dal campo - estremamente importante per applicazioni di immissione dati veloci o tecnologie assistive (ad esempio persone che non possono usare una scheda del mouse nel campo e quindi sono bloccati) – rmcsharry
Questo utilizza Javascript, ma non è necessario scrivere la propria routine di convalida. Invece basta controllare la proprietà validity.valid. Questo sarà vero se e solo se l'input rientra nell'intervallo.
<html>
<body>
<form action="#">
<input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Davvero fantastico ! consente solo i numeri tra Min e Max, invece di scrivere codice javascript come altri suggeriscono, è meglio andare con questo oninput = "validity.valid || (value = '');" –
L'unico problema con questa soluzione è che cancella completamente il valore inserito in precedenza quando viene inserito un valore non valido. –
Come possiamo impedire l'inserimento della chiave offendente e non cancellare l'intero campo? –
type="number" risolve già permettendo numeri solo per essere digitati come le altre risposte qui sottolineare.
Solo per riferimento: con jQuery è possibile sovrascrivere i valori negativi sul focusOut con il seguente codice:
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});
Questo non sostituisce la validazione lato server!
Se si desidera garantire il valore predefinito, vale a dire il valore minimo o qualsiasi altro valore, questa soluzione è funzionante. Questo impedisce anche di cancellare il campo di input. Allo stesso modo puoi impostare anche il valore massimo.
<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value < 1) ? (1/1) : this.value;">> "Questo impedisce anche di cancellare il campo di immissione" No. Questo cancella l'input e riempie il minimo. Non chiaro - quando si digita 123- e si vede 123 nel campo. – extempl
In HTML 5 u può fare in questo modo: e credo che questo sia il modo più elegante per limitare input dell'utente a numeri positivi senza scrivere una funzione di validazione. – Bikku
@GoodBadandUgly - Questo è stato menzionato nella domanda, insieme ai suoi limiti. – Quentin
Ricorda che gli utenti possono sempre aggirare tali limitazioni! Se si invia qualcosa sul lato server (leggere le funzioni db o di recupero dati), è necessario eseguire nuovamente la convalida. – Hafenkranich