Cómo evitar que el usuario ingrese texto en textarea luego de alcanzar el límite máximo de caracteres

Quiero evitar que el usuario ingrese texto en textarea una vez que alcanza un límite máximo de caracteres. Lo que sucedía es que cuando alcancé el límite máximo, mi barra de desplazamiento del área de texto se movió hacia arriba. De alguna manera, evité esto con este código.

jQuery(document).ready(function($) { $('textarea.max').keyup(function() { var $textarea = $(this); var max = 400; if ($textarea.val().length > max) { var top = $textarea.scrollTop(); $textarea.val($textarea.val().substr(0, max)); $textarea.scrollTop(top); } }); }); //end if ready(fn) 

Pero también quiero que después de alcanzar el límite máximo, el usuario no pueda escribir nada en el área de texto. En la actualidad, sucede que después de alcanzar el límite máximo si el usuario presiona y mantiene presionada la tecla, los caracteres están escribiendo en el área de texto, aunque después de soltar el botón vuelve al texto original (es decir $ textarea.val ($ textarea.val (). substr (0, max));). Pero quiero que una vez que esta condición se vuelva verdad

 if ($textarea.val().length > max) { 

el usuario no puede escribir nada Quiero que el cursor desaparezca del área de texto. Pero si el usuario elimina algo de texto, entonces el cursor también estará disponible para que el usuario ingrese nuevamente la entrada. ¿Cómo puedo hacerlo?

El evento de la keyup se dispara después de que se haya producido el comportamiento predeterminado (área de texto que se está keyup ).

Es mejor utilizar el evento de keypress y filtrar caracteres no imprimibles.

Demostración: http://jsfiddle.net/3uhNP/1/ (con una longitud máxima de 4)

 jQuery(document).ready(function($) { var max = 400; $('textarea.max').keypress(function(e) { if (e.which < 0x20) { // e.which < 0x20, then it's not a printable character // e.which === 0 - Not a character return; // Do nothing } if (this.value.length == max) { e.preventDefault(); } else if (this.value.length > max) { // Maximum exceeded this.value = this.value.substring(0, max); } }); }); //end if ready(fn) 
  

Utilice el código anterior para limitar el número de caracteres insertados en un área de texto. Si desea deshabilitar el área de texto en sí (es decir, no podrá editar después), puede usar javascript / jquery para deshabilitarlo.

Mantenlo simple

 var max = 50; $("#textarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); }); 

y agrega esto en tu html

  

ver ejemplo

Simplemente escriba este código en su archivo Javascript. Pero necesita especificar el atributo ‘maxlength’ con textarea. Esto funcionará para todos los textarea de una página.

 $('textarea').bind("change keyup input",function() { var limitNum=$(this).attr("maxlength"); if ($(this).val().length > limitNum) { $(this).val($(this).val().substring(0, limitNum)); } }); 

Puedes mantener tu evento tal como es y solo usar esta biblioteca

Ejemplos

 // applying a click event to one element Touche(document.querySelector('#myButton')).on('click', handleClick); // or to multiple at once Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks); // or with jQuery $('.myButtons').on('click', handleClicks); 

Podría directamente dar maxlength a textarea para deshabilitarse. Pero, desea mostrar el mensaje apropiado, luego utilice el evento de keyup para el comportamiento predeterminado y la length textarea para calcular el personaje y mostrar el mensaje adecuado.

HTML

 

jQuery

 $(function(){ var max = parseInt($("#tarea").attr("maxlength")); $("#count").text("Characters left: " + max); $("#tarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); if($(this).val().length==max) $("#msg").text("Limit Reached...."); else $("#msg").text(""); }); }); 

Demo Fiddle

Para aquellos que ya usan ES2015 en sus navegadores, aquí hay una implementación que usa algunas de las respuestas anteriores:

 class InputCharacterCount { constructor(element, min, max) { this.element = element; this.min = min; this.max = max; this.appendCharacterCount(); } appendCharacterCount(){ let charCount = ``; this.element.closest('.form-group').append(charCount); } count(event){ this.element.attr('maxlength', this.max); // Add maxlenght attr to input element let value = this.element.val(); this.element .closest('.form-group') .find('.char-counter') .html(value.length+'/'+this.max); // Add a character count on keyup/keypress if (value.length < this.min || value.length > this.max) { // color text on min/max changes this.element.addClass('text-danger'); } else { this.element.removeClass('text-danger'); } } } 

Uso:

 let comment = $('[name="collection-state-comment"]'); let counter = new InputCharacterCount(comment, 21, 140); $(comment).keyup(function(event){ counter.count(event); }); 

Puede usar este complemento en lugar de tratar de escribir el suyo. He descubierto que funciona bastante bien.