Come limitare o limitare l'utente a immettere solo un massimo di cinque caratteri nella casella di testo?Numero limite di caratteri consentiti nel campo di testo di immissione modulo
Di seguito è riportato il campo di input come parte della mia forma:
<input type="text" id="sessionNo" name="sessionNum" />
Sta usando qualcosa come maxSize o qualcosa del genere?
Il numero massimo di caratteri che saranno accettati come input. Questo può essere maggiore di quanto specificato da SIZE, nel qual caso il campo scorrerà in modo appropriato. Il valore predefinito è illimitato.
<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />
Tuttavia, questo può o non può essere influenzata dal vostro gestore. Potrebbe essere necessario utilizzare o aggiungere un'altra funzione di gestione per verificare anche la lunghezza.
Ho trovato questa risposta utile quando si limita la fase di inserimento. Puoi anche limitarlo nella fase di validazione quando invii e fai apparire un messaggio di convalida usando l'attributo 'pattern'. Vedi http://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5 – ibgib
Il modo più semplice per farlo:
maxlength="5"
Quindi .. L'aggiunta di questo attributo per il vostro controllo:
<input type="text"
id="sessionNo"
name="sessionNum"
onkeypress="return isNumberKey(event)"
maxlength="5" />
Aggiungere il seguente all'intestazione:
<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
}
</script>
<input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);"
onKeyUp="limitText(this,5);"" />
'this.form.sessionNo' sembra un po 'sospetto. Perché non solo "questo"? Inoltre, 'limitCount' e' limitNum' sembrano fuori servizio/non necessari? –
corretto. In questo modo se volessi limitarlo a determinati caratteri o numeri che potresti, ma se non ti interessa, Max Length funzionerebbe correttamente. Quindi, se vuoi che i valori siano compresi tra 1 e 50, potresti o tutti i numeri positivi, ecc. – codemonkeyww
'this.form.sessionNo' non sembra ancora corretto. 'this' in quel contesto punterà a' input', non 'document'. –
Secondo a w3c, il valore predefinito per l'attributo MAXLENGTH è un numero illimitato. Quindi, se non si specifica il limite massimo, un utente può tagliare e incollare la Bibbia un paio di volte e incollarla nel modulo.
Anche se si specifica MAXLENGTH su un numero ragionevole, assicurarsi di ricontrollare la lunghezza dei dati inviati sul server prima dell'elaborazione (utilizzando qualcosa come php o asp) poiché è abbastanza semplice aggirare la restrizione di base di MAXLENGTH comunque
Come fa un utente a raggiungere la lunghezza massima ??? – lopezdp
@lopezdp, ci sono molti modi per "aggirare" le restrizioni html/javascript. Il modo più semplice per controllare è aprire la pagina con Chrome, "controlla elemento" e modifica manualmente HTML. Il modo più elaborato per muoversi - scrivere uno script che pubblicherà i dati ignorando qualsiasi restrizione (usando la libreria di arricciatura o qualcosa di simile). Come sviluppatore di back-end non si dovrebbe mai fidarsi della convalida dei dati frontend: tutte le regole dovrebbero essere duplicate sul server. La convalida del frontend è solo un modo per risparmiare tempo per l'utente puntando a errori evidenti senza fare una richiesta al server. –
ho sempre puntuale fare in questo modo:
$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
maxChars.bind('keyup', function(e){
length = new Number(maxChars.val().length);
counter = max_length-length;
$("#sessionNum_counter").text(counter);
});
}
});
ingresso:
<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>
rendere più semplice
e utilizzare un avviso per mostrare che i caratteri massimi sono stati utilizzati.
<input type="text" maxlength="5">
la quantità massima di lettere che può essere nell'input è 5.
È possibile utilizzare <input type = "text" maxlength="9"> o
<input type = "number" maxlength="9"> per i numeri o <input type = "email" maxlength="9"> per la posta elettronica convalida apparirà
Maxlength
Il numero massimo di caratteri che verrà accettato come input. L'attributo maxlength specifica il numero massimo di caratteri consentiti nell'elemento.
<form action="/action_page.php">
Username: <input type="text" name="usrname" maxlength="5"><br>
<input type="submit" value="Submit">
</form>
uscita
minLength
La direttiva ng-minlength aggiunge una restrizione ad un campo di input, ed al validatore del modulo.
La direttiva ng-minlength aggiungerà uno stato "non valido" del campo di input se la lunghezza del valore è inferiore a quella specificata.
Nota: se il valore è vuoto, è considerato valido.
<form name="myForm">
<input name="myInput" ng-model="myInput" ng-minlength="5">
<h1 ng-if="!myForm.myInput.$valid">The value is too short</h1>
</form>
uscita
Max
L'attributo max specifica il valore massimo di un elemento.
Suggerimento: utilizzare l'attributo max insieme all'attributo min per creare un intervallo di valori legali.
Nota: gli attributi max e min funzionano con i seguenti tipi di input: numero, intervallo, data, datetime, datetime-local, mese, ora e settimana.
<form>
<input type="number" name="number" max="5">
</form>
uscita
Min
L'attributo min specifica il valore minimo di un elemento.
Suggerimento: utilizzare l'attributo min insieme all'attributo max per creare un intervallo di valori legali.
Nota: gli attributi max e min funzionano con i seguenti tipi di input: numero, intervallo, data, datetime, datetime-local, mese, ora e settimana.
<form >
<input type="number" name="quantity" min="1"><br>
<input type="submit">
</form>
uscita
Qui '' demo live **: ** http://jsfiddle.net/mcBbW/1/ –