Limiter le nombre de caractères autorisés dans le champ de saisie du formulaire

Comment puis-je limiter ou restreindre l'utilisateur pour qu'il n'entre qu'un maximum de cinq caractères dans la zone de texte?

Voici le champ de saisie dans le cadre de mon formulaire:

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

Utilise-t-il quelque chose comme maxSize ou quelque chose comme ça?

maxlength :

Le nombre maximum de caractères qui seront acceptés comme entrée. Cela peut être supérieur à celui spécifié par SIZE, auquel cas le champ défilera correctement. La valeur par défaut est illimitée.

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

Cependant, cela peut ou non être affecté par votre gestionnaire. Vous devrez peut-être également utiliser ou ajouter une autre fonction de gestionnaire pour tester la longueur.

Le moyen le plus simple de le faire:

maxlength="5"

Donc ... Ajout de cet attribut à votre contrôle:

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

Ajoutez ce qui suit à l'en-tête:

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

Selon w3c , la valeur par défaut de l'attribut MAXLENGTH est un nombre illimité. Donc, si vous ne spécifiez pas le maximum, un utilisateur peut couper et coller la Bible plusieurs fois et la coller dans votre formulaire.

Même si vous spécifiez MAXLENGTH à un nombre raisonnable, assurez-vous de vérifier la longueur des données soumises sur le serveur avant le traitement (en utilisant quelque chose comme php ou asp) car il est assez facile de contourner la restriction de base MAXLENGTH de toute façon

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

le nombre maximum de lettres pouvant figurer dans l'entrée est de 5.

Simplifiez les choses

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

et utilisez une alerte pour montrer que max caractères ont été utilisés.

Je fais toujours ça comme ça:

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

Contribution:

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

Longueur maximale

Le nombre maximum de caractères qui seront acceptés comme entrée. L'attribut maxlength spécifie le nombre maximum de caractères autorisés dans l'élément.

Écoles Maxlength W3

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

Vous pouvez utiliser <input type = "text" maxlength="9"> ou

<input type = "number" maxlength="9">pour les numéros ou <input type = "email" maxlength="9">pour la validation par e-mail apparaîtra

<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)
}

Utilisez maxlenght = "nombre de caractères"

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

Le code suivant inclut un compté ...

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>