Limitar el número de caracteres permitidos en el campo de texto de entrada del formulario

¿Cómo puedo limitar o restringir al usuario para que ingrese un máximo de cinco caracteres en el cuadro de texto?

A continuación se muestra el campo de entrada como parte de mi formulario:

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

¿Está usando algo como maxSize o algo así?

longitud máxima :

El número máximo de caracteres que se aceptarán como entrada. Esto puede ser mayor que el especificado por SIZE, en cuyo caso el campo se desplazará apropiadamente. El valor predeterminado es ilimitado.

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

Sin embargo, esto puede verse afectado o no por su controlador. Es posible que también deba usar o agregar otra función de controlador para probar la longitud.

La forma más sencilla de hacerlo:

maxlength="5"

Entonces ... Agregando este atributo a su control:

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

Agregue lo siguiente al encabezado:

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

Según w3c , el valor predeterminado para el atributo MAXLENGTH es un número ilimitado. Entonces, si no especifica el máximo, un usuario puede cortar y pegar la Biblia un par de veces y pegarla en su formulario.

Incluso si especifica MAXLENGTH a un número razonable, asegúrese de verificar la longitud de los datos enviados en el servidor antes de procesarlos (usando algo como php o asp), ya que es bastante fácil sortear la restricción básica MAXLENGTH de todos modos.

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

la cantidad máxima de letras que puede haber en la entrada es 5.

Hazlo más simple

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

y utilice una alerta para mostrar que se han utilizado los caracteres máximos.

Siempre lo hago así:

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

Entrada:

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

Longitud máxima

El número máximo de caracteres que se aceptarán como entrada. El atributo maxlength especifica el número máximo de caracteres permitidos en el elemento.

Escuelas Maxlength W3

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

Puedes usar <input type = "text" maxlength="9"> o

<input type = "number" maxlength="9">para números o <input type = "email" maxlength="9">para validación de correo electrónico se mostrará

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

Utilice maxlenght = "número de caracteres"

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

El siguiente código incluye un contado ...

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>