Ho una casella di input che accetta valori da 0 a 100. Voglio impedire agli utenti di scrivere qualcosa di più grande o più piccolo.Box di input limite a 0-100
Sto usando il plugin jQuery keyfilter per limitare l'ingresso di un campo: http://code.google.com/p/jquery-keyfilter/
Questo plugin può limitare l'ingresso in numeri, ma non all'interno di un intervallo. Come impedire agli utenti di immettere numeri che superano l'intervallo. Grazie.
Usa pianura Javascript come questo:
<script>
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
</script>
quindi dichiarare la casella di input in questo modo:
<input type="text" onchange="handleChange(this);" />
Perché hai agganciato questa funzione per OnChange(), che funzionerà anche se un utente copia/incolla qualcosa nella casella di input.
È sufficiente testare il valore del campo dopo ogni sequenza di tasti e prima che venga inviato al campo (ad esempio con un gestore di eventi keypress) - se il nuovo tasto creerebbe un valore troppo alto, rifiutare la pressione del tasto .
Ad esempio: se il valore corrente è 20 e l'utente prova a digitare un terzo numero, è necessario rifiutare la pressione del tasto restituendo false dal gestore eventi. Fondamentalmente l'unico terzo carattere che dovresti consentire è "0" e solo se il valore del campo corrente è "10".
Consiglierei di non utilizzare questo metodo. Almeno cambialo all'evento sfocatura. Alla gente non piace che il loro contributo venga convalidato prima di aver finito di entrare. Per non parlare, è possibile popolare caselle di testo senza i tasti. (pasta per il mouse) – recursive
<input type="text" id="test_id" />
<script>
document.getElementById("test_id").onkeyup=function(){
var input=parseInt(this.value);
if(input<0 || input>100)
alert("Value should be between 0 - 100");
return;
}
</script>
Sarei ok se non avessi usato gli avvisi. Odio i popup per questo tipo di notifica. – tvanfosson
Suggerisco di utilizzare il plug-in jQuery Validation. Molto flessibile ed estensibile. Per gestire il tuo intervallo, consulta quanto segue. Verrà verificato che qualsiasi input nel modulo contrassegnato con la classe "percentuale" sia presente e rientri nell'intervallo specificato.
$("#myform").validate({
rules: {
percentage: {
required: true,
range: [0, 100]
}
}
});
<input id="percent" name="percent" class="percentage" />
La ragione per cui io suggerisco di usare il plugin è che gestisce molte situazioni di validazione fuori dalla scatola, è di alleviare la responsabilità di scrivere codice di convalida per molti scenari - si può consumare il vostro sforzo creativo in modi migliori . È anche usato da molte persone e quindi ha il vantaggio di essere migliorato da una grande comunità.
Aggiornamento: Inoltre, si può prendere in considerazione un meccanismo di input alternativo, come ad esempio un slider (demo) che sarà limitare i dati in un modo che non è soggetto a errore dell'utente - o almeno non questo particolare tipo di errore.
Grazie per il vostro aiuto. Ho uno slider e una casella di input. La diapositiva è agganciata alla scatola di input e viceversa. Il motivo per cui non sto usando la validazione è perché l'inserimento di un valore troppo grande dovrebbe semplicemente portare il cursore al 100%, ma la casella di input non seguirà, ed è solo strano. Inoltre, l'evento sfocatura potrebbe allontanare l'utente dalla pagina/nascondere il campo di input e l'utente verrà lasciato con un valore non rispettato senza mai vedere l'errore. – Jourkey
@Jourkey - guarda il mio commento sulla risposta accettata. Nasconderei l'input quando creo il cursore. Se questa non è un'opzione, per lo meno vorrei sollevare un avviso e non lasciare che il modulo si sottometta piuttosto che forzare il valore. – tvanfosson
se è solo per un numero di caratteri non superiore a 20 (per esempio), quindi è possibile utilizzare
<input type="text" name="usrname" maxlength="20" />
Se è necessario gestire alcuni altri casi nel campo di immissione, quindi una funzione sarebbe una migliore opzione.
riguarda il valore dell'input, non la lunghezza della stringa! – behz4d
è possibile utilizzare Math.max e Math.min
val = Math.min(100,Math.max(0,val));
HTML5 added several new input types, tra cui number.
<form>
Quantity (between 1 and 100):
<input type="number" name="quantity" min="1" max="100">
</form>
nuovi tipi di input che non sono supportati dai browser web più anziani, si comporteranno come <input type="text">.
Runnable example da W3Schools.
Grazie mille. Come legherei l'evento in modo che non sia in linea? – Jourkey
-1 \t La coercizione di valori accettabili è un'interfaccia orribile. Un utente disattento potrebbe facilmente inserire dati indesiderati in questo modo. È necessario contrassegnare i dati come non validi e consentire all'utente di scegliere come regolarli. Forse, hanno appena digitato nella casella sbagliata e il valore appartiene davvero altrove, dove sarebbe valido. – tvanfosson
Vedo decisamente il tuo punto. Ma non è esattamente ciò che fa un cursore? Quando cerchi di superare i 100, ti costringe a tornare a 100/il massimo. – Jourkey