Avisar al usuario cuando supera el maxlength

Cuando un usuario se encuentra ante un input en el que existe un atributo maxlength y se pone a escribir y llega al máximo, verá que lo que escribe no se inserta. Bien, podemos suponer que el usuario sabrá que el input es uno de esos que tiene maxlength o lo mismo le da por pensar que no funciona y llame al servicio técnico y allí le den una explicación.

Pero es fácil que el usuario haga un copy & paste y pase de largo sin enterarse de que lo que ha pegado no ha entrado y luego se lleve la mala sorpresa de que no se haya guardado todo lo que él deseaba, y por lo tanto, se enfade.

La solución pasa por utilizar JavaScript. He dejado en el Plunker el ejemplo de cómo realizarlo.

<input type="text" name="whatever" id="whatever" class="js-maxlength" data-maxlength="5">

En vez de utilizar el atributo maxlenth tradicional, usamos un data-* de HTML5, y usamos una clase CSS para asociar el evento keyup. Creo que es buena idea utilizar el prefijo js- para las clases CSS que intervienen en funcionalidad JavaScript.

$('.js-maxlength').on('keyup', function(){
  //cacheamos el $(this) por motivo de eficiencia
  var $esto = $(this);
  var maximo = $esto.attr('data-maxlength');
  maximo = parseInt(maximo, 10);

  if ( $esto.val().length > maximo ) {
    //No somos traicioneros y avisamos
    alert('Ojo, el numero maximo de caracteres es de ' + maximo);
    $esto.val( $esto.val().substring(0,maximo) ); //seguimos haciendo el maxlength
    $esto.focus();
}
});
Avisar al usuario cuando supera el maxlength

2 comentarios en “Avisar al usuario cuando supera el maxlength

  1. Lis dijo:

    Buenos días Aitor:
    Te escribo en este comentario pues no he visto la manera de ponerme en contacto contigo.

    Estoy buscando un experto a ver si me puedes ayudar:

    Estoy intentando cambiar todos los enlaces listados en una web. Estos enlaces se cargan de una base de datos y son varios centenares.

    Su formato es:

    http://dominio.com/turismo/nombredelestablecimiento.php

    Necesito cambiar estos enlaces de forma automática por:

    http://dominio.com/APP-turismo/nombredelestablecimiento.php

    No tengo ni idea de javascript, pero me han dicho que quizá podría hacerse.

    Agradecería cualquier ayuda, pero si es así, por favor expliquenmelo en detalle, pues como digo no se nada de JQuery.

    Muchas gracias por adelantado.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s