buscando aquí una respuesta encontré la siguiente pregunta:
Respuesta para un problema similar
Estoy tratando de replicar esta respuesta pero en un escenario diferente y parece que no funciona cuando llamo a una función en lugar de eventos clave de jQuery en document.ready().
Esto es lo que tengo:
function maxLenght(event) { var input = $('p[data-id="111"]').get(0); if (parseInt(input.textContent.length) >= 10 && event.keyCode != 8) { event.preventDefault(); } else { $(input).outerHeight(32).outerHeight(input.scrollHeight + 4); } $('span').text('Total chars:' + (input).textContent.length); } p { height: 100px; width: 300px; border: 1px solid grey; outline: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p contenteditable="true" data-id="111" onkeyup="maxLenght(event)"></p> <span></span>También debería poder pegar texto con el botón derecho del ratón o ctrl + v, navegar por el texto con las teclas de flecha, retroceder, borrar, etc.
Entonces, mi pregunta es si es posible hacerlo manteniendo esta funcionalidad (llamar a una función) y cómo puedo hacerlo y qué tiene de malo lo que tengo ahora.
Puede usar onkeydown en lugar de onkeyup .
<p contenteditable="true" data-id="111" onkeyup="maxLenght(event)"></p>El retroceso no se puede usar para eliminar caracteres cuya longitud sea mayor o igual al límite dado. Más bien, agregue una condición a la instrucción if que indique que acepta la tecla de retroceso.
... if (parseInt(input.textContent.length) >= 10 && event.key !== "Backspace") { event.preventDefault(); } ...