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