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


115

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?


16
Ici <input type="text" maxlength="5"> Démo en direct: jsfiddle.net/mcBbW/1
Šime Vidas

Réponses:


174

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.


J'ai trouvé cette réponse utile lors de la limitation de la phase d'entrée. Vous pouvez également le limiter lors de la phase de validation lors de la soumission et afficher un message de validation à l'aide de l' patternattribut. Voir stackoverflow.com/questions/10281962/…

31

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

8

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

this.form.sessionNosemble un peu suspect. Pourquoi pas juste this? Aussi, limitCountet limitNumsemblent également hors service / inutiles?
Jared Farrish

1
Corrigé. Faire de cette façon si vous vouliez le limiter à certains caractères ou nombres, vous pourriez, mais si vous ne vous souciez pas de cela, la longueur maximale fonctionnerait bien. Donc, dites si vous voulez que les valeurs soient comprises entre 1 et 50, vous pouvez ou tous les nombres positifs, etc.
b3verelabs

this.form.sessionNone semble toujours pas juste. thisdans ce contexte pointera vers le input, non document.
Jared Farrish

Toujours pas bien, il ne fait pas référence non formplus. thisest tout ce dont vous avez besoin. En outre, sur le plan technique si vous manquèrent de faire référence à l'élément le form, il serait par ( form/ input) name, non id, à savoir: document.formName.sessionNum.
Jared Farrish

Correct, j'ai tapé trop vite, il était auparavant enveloppé dans un formulaire. Mais vous passerez simplement la référence à l'entrée de la fonction pour obtenir la valeur actuelle du champ, puis ajoutez toute logique que vous souhaitez limiter ce champ.
b3verelabs

8

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


1
@lopezdp, il existe plusieurs façons de "contourner" les restrictions html / javascript. Le plus simple à vérifier est d'ouvrir votre page avec Chrome, d '«inspecter l'élément» et de modifier manuellement le HTML. La façon la plus élaborée de se déplacer - écrire un script qui affichera les données en ignorant toutes les restrictions (en utilisant la bibliothèque curl ou quelque chose de similaire). En tant que développeur backend, vous ne devez jamais faire confiance à la validation frontend des données - toutes les règles doivent être dupliquées sur le serveur. La validation frontend est juste un moyen de gagner du temps pour l'utilisateur en pointant sur des erreurs évidentes sans faire de requête au serveur.
Val Petruchek

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

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


4

Simplifiez les choses

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

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


3

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>

2

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>

1

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


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

0

Utilisez maxlenght = "nombre de caractères"

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

0

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>


-1
<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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.