javascript - son - Limitar el número de caracteres en un div de contenido editable

en html, onblur y onfocus son:

Question

Estoy utilizando elementos div contentos en mi aplicación web y estoy tratando de encontrar una solución para limitar la cantidad de caracteres permitidos en el área, y una vez que se alcanza el límite, intentar ingresar caracteres simplemente no hace nada. Esto es lo que tengo hasta ahora:

var content_id = ''editable_div'';

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

function check_charcount(content_id, max)
{   
    if($(''#''+content_id).text().length > max)
    {
        $(''#''+content_id).text($(''#''+content_id).text().substring(0, max));
    }
}

Esto SÍ limita el número de caracteres al número especificado por ''max''; sin embargo, una vez que el texto del área se establece mediante la función jquery .text (), el cursor se restablece al comienzo del área. Entonces, si el usuario sigue escribiendo, los caracteres recién ingresados ​​se insertarán al comienzo del texto y se eliminará el último carácter del texto. Así que realmente, solo necesito una forma de mantener el cursor al final del texto del área contenta.

Answer 1

¿Qué le e.preventDefault() pasar el objeto de event a su función y llamar a 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 permitirle al usuario hacer cosas como ''eliminar''.

EDITAR:

Se agregó soporte para la tecla ''eliminar''.

EDICION 2:

Además, es probable que puedas deshacerte del controlador de keyup . keydown debería ser suficiente.

Answer 2

En primer lugar, este tipo de cosas es irritante para el usuario: en su lugar, le sugiero que haga algo similar al campo de comentarios de , que le permite escribir tanto o tan poco como quiera, le muestra un mensaje que le dice cuántos caracteres ha escrito y si es demasiado o muy poco, y se niega a dejar que envíe un comentario cuya longitud no es válida.

En segundo lugar, si realmente tiene que limitar la longitud del texto, reemplazar todo el contenido de <div> 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 evento de keypress y simplemente evitar que se inserte el carácter usando preventDefault() en el evento (o en IE, estableciendo el returnValue del evento en true , suponiendo que estés usando attachEvent ). Esto no evitará que el usuario paste texto, por lo que tendrá que manejar el evento paste (que no existe en Opera o Firefox <3, por lo que necesitará algún tipo de solución basada en encuestas para aquellos) . Como no podrá acceder al contenido que se está pegando por adelantado, no tendrá forma de saber si el engomado lo llevará por encima del límite de caracteres, por lo que deberá configurar un temporizador para verificar la longitud de nuevo en breve después de la pasta. Siendo ese el caso, la primera opción me parece preferible.

Answer 3

Esta es la forma en que lo hice mediante el enlace de jQuery, haciéndolo fácil al agregar una propiedad data-input-length a un elemento editable de contenido. Simplemente agregue el código de JavaScript en cualquier lugar de su documento.

$(document).ready(function(){
 // Excempt keys(arrows, del, backspace, home, end);
 var excempt = [37,38,39,40,46,8,36,35];
 // Loop through every editiable thing
 $("[contenteditable=''true'']").each(function(index,elem) {
     var $elem = $(elem);
     // Check for a property called data-input-length="value" (<div contenteditiable="true" data-input-length="100">)
     var length = $elem.data(''input-length'');
     // Validation of value
     if(!isNaN(length)) {
      // Register keydown handler
         $elem.on(''keydown'',function(evt){
          // If the key isn''t excempt AND the text is longer than length stop the action.
             if(excempt.indexOf(evt.which) === -1 && $elem.text().length > length) {
                evt.preventDefault();
                return false;
             }
         });
     }
 });
});

div {
  background-color:#eee;
  border: 1px solid black;
  margin:5px;
  width:300px;
  height:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" data-input-length="100">
You can type a 100 characters here
</div>
<div contenteditable="true" data-input-length="150">
You can type a 150 characters here
</div>
<div contenteditable="true" data-input-length="10">
You can type a 10 characters here
</div>

Answer 4

La siguiente solución también considera las teclas de control (que corresponden a caracteres no imprimibles).

//Maximum number of characters
var max = 200;

$(''#editable_div'').keydown(function(e) {
    var keycode = e.keyCode;

    //List of keycodes of printable characters from:
    //http://.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
    var printable = 
        (keycode > 47 && keycode < 58)   || // number keys
        keycode == 32 || keycode == 13   || // spacebar & return key(s) (if you want to allow carriage returns)
        (keycode > 64 && keycode < 91)   || // letter keys
        (keycode > 95 && keycode < 112)  || // numpad keys
        (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
        (keycode > 218 && keycode < 223);   // [/]'' (in order)

    if (printable) {
        //Based on the Bala Velayutham''s answer
        return $(this).text().length <= max; 
    }
});

Answer 5

Si desea que funcione con las clases. En otras palabras, elemento podría compartir nombres de clase y aún tener su propio recuento único:

var content_id = ''.myclass'';  

max = 1;
//binding keyup/down events on the contenteditable div
$(content_id).keyup(function(e){ check_charcount(this, max, e); });
$(content_id).keydown(function(e){ check_charcount(this, max, e); });

function check_charcount(elem, max, e){   
    if(e.which != 8 && $(elem).text().length >= max){       
        e.preventDefault();
    }
}

Answer 6

Una forma simple de lograr esto:

<div onkeypress="return (this.innerText.length <= 256)" contenteditable="true">

Answer 7

Una revisión más generalizada de la respuesta de @ user113716 que no funciona para múltiples campos contenteditable (cuenta el número total de caracteres para todos los elementos que coinciden con el ID dado, por lo que solo puede ingresar el máximo de caracteres en la página).

Esta solución le permite usar una clase general y limita el número de caracteres en cada campo contenteditable de forma independiente.

el html:

<div contenteditable="true" name="choice1" class="textfield"></div>

Y el JavaScript:

MAX_TEXTINPUT = 10;
TEXTFIELD_CLASS = "textfield"

$(document).ready(function() {

    //binding keyup/down events on the contenteditable div
    $(''.''+TEXTFIELD_CLASS).keydown(function(e){ check_charcount(TEXTFIELD_CLASS, MAX_TEXTINPUT, e); });

})

function check_charcount(inputclass, max, e) {   
    var focused = $(document.activeElement)

    if(focused.hasClass(inputclass) && e.which != 8 && $(focused).text().length >= max)
    {
        e.preventDefault();
    }
}

Answer 8

¡Esta es la mejor manera de hacer esta forma de generalización y me funciona muy bien!

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

    $(''.textfield'').on("keypress paste", function (e) {
        if (this.innerHTML.length >= this.getAttribute("max")) {
            e.preventDefault();
            return false;
        }
    });

Answer 9

$("[contenteditable=true]").keydown(function(e) {
    var max = $(this).attr("maxlength");
    if (e.which != 8 && $(this).text().length > max) {
        e.preventDefault();
    }
});

Answer 10

var onKeyPress = function () {
    var keyCode = window.event.keyCode,
        isNumeric = (keyCode > 47 && keyCode < 58),
        isNotEnterKey = !!(window.event.keyCode !== 13);

        (isNotEnterKey) || (this.blur());

        return (isNumeric && this.innerText.length < 3);
};