Begrenzen Sie die Anzahl der Zeichen, die im Texteingabefeld des Formulars zulässig sind

Wie beschränke oder beschränke ich den Benutzer darauf, maximal fünf Zeichen in das Textfeld einzugeben?

Unten ist das Eingabefeld als Teil meines Formulars:

<input type="text" id="sessionNo" name="sessionNum" />

Verwendet es so etwas wie maxSize oder so?

maximale Länge :

Die maximale Anzahl von Zeichen, die als Eingabe akzeptiert werden. Dies kann größer sein als in SIZE angegeben. In diesem Fall wird das Feld entsprechend gescrollt. Der Standardwert ist unbegrenzt.

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

Dies kann jedoch von Ihrem Handler beeinflusst werden oder nicht. Möglicherweise müssen Sie auch eine andere Handlerfunktion verwenden oder hinzufügen, um die Länge zu testen.

Der einfachste Weg, dies zu tun:

maxlength="5"

Also .. Hinzufügen dieses Attributs zu Ihrer Kontrolle:

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />

Fügen Sie dem Header Folgendes hinzu:

<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);"" />

Laut w3c ist der Standardwert für das MAXLENGTH-Attribut eine unbegrenzte Anzahl. Wenn Sie also nicht das Maximum angeben, kann ein Benutzer die Bibel ein paar Mal ausschneiden, einfügen und in Ihr Formular einfügen.

Selbst wenn Sie die MAXLENGTH auf eine angemessene Anzahl festlegen, sollten Sie die Länge der auf dem Server übermittelten Daten vor der Verarbeitung überprüfen (mit PHP oder Asp), da es ohnehin recht einfach ist, die grundlegende MAXLENGTH-Einschränkung zu umgehen

<input type="text" maxlength="5">

Die maximale Anzahl von Buchstaben, die in der Eingabe enthalten sein können, beträgt 5.

Mach es einfacher

<input type="text" maxlength="3" />

und verwenden Sie eine Warnung, um anzuzeigen, dass maximal Zeichen verwendet wurden.

Ich mache es immer so:

$(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);
    });
}
});

Eingang:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>

Maximale Länge

Die maximale Anzahl von Zeichen, die als Eingabe akzeptiert werden. Das Attribut maxlength gibt die maximal zulässige Anzahl von Zeichen im Element an.

Maxlength W3 Schulen

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

Sie können <input type = "text" maxlength="9"> oder verwenden

<input type = "number" maxlength="9">für Nummern oder <input type = "email" maxlength="9">für die E-Mail-Validierung wird angezeigt

<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

Verwenden Sie maxlenght = "Anzahl der Zeichen"

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />

Der folgende Code enthält eine gezählte ...

var count = 1;

do {
    function count_down(obj, count){

    let element = document.getElementById('count'+ count);

    element.innerHTML = 80 - obj.value.length;

    if(80 - obj.value.length < 5){
        element.style.color = "firebrick";
    }else{
        element.style.color = "#333";
    }
}
count++;
} while (count < 20); 

.text-input {
    padding: 8px 16px;
    width: 50%;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    font-family: Raleway;
    border: 1px solid dodgerblue;
  }

<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
        <span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">

<script>
function checkNumber(key) {
  console.log(key);
  var inputNumber = document.querySelector("#MobileNumber").value;
  if(key.key >= 0 && key.key <= 9) {
    inputNumber += key.key;
  }
  else {
    key.preventDefault();
  }
}
</script>