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


115

¿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í?


16
Aquí la <input type="text" maxlength="5"> demostración en vivo: jsfiddle.net/mcBbW/1
Šime Vidas

Respuestas:


174

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.


Encontré esta respuesta útil al limitar en la fase de entrada. También puede limitarlo en la fase de validación al enviar y mostrar un mensaje de validación usando el patternatributo. Consulte stackoverflow.com/questions/10281962/…

31

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

8

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

this.form.sessionNoparece un poco sospechoso. ¿Por qué no solo this? Además, ¿ limitCounty limitNumtambién parecen fuera de servicio / innecesarios?
Jared Farrish

1
Lo corrigió. Al hacerlo, si quisiera limitarlo a ciertos caracteres o números, podría hacerlo, pero si no le importa eso, la Longitud máxima funcionaría bien. Entonces, digamos que si desea que los valores estén entre 1 y 50, puede hacerlo o todos los números positivos, etc.
b3verelabs

this.form.sessionNotodavía no parece correcto. thisen ese contexto apuntará al input, no document.
Jared Farrish

Aún no está bien, tampoco hace referencia al form. thises todo lo que necesitas. Además, técnicamente, si usted quería hacer referencia al elemento por el form, sería por ( form/ input) name, no id, es decir: document.formName.sessionNum.
Jared Farrish

Correcto Escribí para rápido que estaba envuelto en el formulario a antes. Pero simplemente pasaría la referencia a la entrada en la función para obtener el valor actual del campo y luego agregaría cualquier lógica que desee para limitar ese campo.
b3verelabs

8

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.


1
@lopezdp, hay varias formas de "sortear" las restricciones de html / javascript. Lo más fácil de verificar es abrir su página con Chrome, "inspeccionar elemento" y modificar HTML manualmente. La forma más elaborada de moverse es escribir un script que publique los datos ignorando cualquier restricción (usando la biblioteca curl o algo similar). Como desarrollador de backend, nunca debe confiar en la validación de datos de frontend; todas las reglas deben estar duplicadas en el servidor. La validación de frontend es solo una forma de ahorrar tiempo al usuario al señalar errores obvios sin hacer una solicitud al servidor.
Val Petruchek

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

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


4

Hazlo más simple

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

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


3

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>

2

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>

1

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á


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

Utilice maxlenght = "número de caracteres"

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

0

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>


-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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.