Saltar al contenido

Limitación del número de caracteres en un div ContentEditable

Te sugerimos que pruebes esta resolución en un ambiente controlado antes de pasarlo a producción, saludos.

Solución:

¿Qué tal pasar en el event objetar su función y llamar e.preventDefault() si se alcanza el máximo?

var content_id = 'editable_div';  

max = 10;

//binding keyup/down events on the contenteditable div
$('#'+content_id).keyup(function(e) check_charcount(content_id, max, e); );
$('#'+content_id).keydown(function(e) check_charcount(content_id, max, e); );

function check_charcount(content_id, max, e)
   
    if(e.which != 8 && $('#'+content_id).text().length > max)
    
       // $('#'+content_id).text($('#'+content_id).text().substring(0, max));
       e.preventDefault();
    

Aunque, es posible que deba hacer un poco más para permitir que el usuario haga cosas como ‘eliminar’.


EDITAR:

Se agregó soporte para ‘eliminar’ key.


EDITAR 2:

Además, probablemente podrías deshacerte del keyup manipulador. keydown debería ser suficiente.

Una manera simple de lograr esto:

En primer lugar, este tipo de cosas es irritante para el usuario: sugeriría en su lugar hacer algo similar al campo de comentarios de StackOverflow, que le permite escribir tanto o tan poco como quiera, le muestra un mensaje que le dice cuántos caracteres ha escrito. y si son demasiados o demasiado pocos, y se niega a permitirle enviar un comentario cuya longitud no sea válida.

En segundo lugar, si realmente tiene que limitar la longitud del texto, reemplazando todo el contenido del

en cada pulsación de tecla si el contenido es demasiado largo es innecesariamente costoso y hará que el editor no responda en máquinas más lentas. Sugiero manejar el keypress evento y simplemente evitando que el carácter se inserte usando preventDefault() en el evento (o en IE, configurando el evento returnValue a trueasumiendo que estás usando attachEvent). Esto no evitará que el usuario pegue texto, por lo que deberá manejar el paste evento (que no existe en Opera o Firefox < 3, por lo que necesitará algún tipo de solución basada en encuestas para esos). Dado que no podrá acceder al contenido que se está pegando por adelantado, no tendrá forma de saber si el pegado lo llevará por encima del límite de caracteres, por lo que deberá configurar un temporizador para verificar la longitud nuevamente en breve. después de la pasta. Siendo así, me parece preferible la primera opción.

Recuerda que tienes la capacidad de comentar .

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *