Tengo un área de texto que está conectada a números de línea que se hacen con una lista ordenada, pero quiero poder saber cuándo se crea una nueva línea y cuándo se elimina una línea, como para agregar o eliminar elementos de lista ordenados de manera que la cantidad de elementos de lista ordenados se corresponde con el número de líneas en el área de texto.
Me he dado cuenta de que cada vez que se crea una nueva línea, se usa la tecla Intro para hacerlo, y que cuando se elimina una línea, eso sucede a veces cuando se usa la tecla de retroceso.
Tengo detectores de eventos para el área de texto, con la identificación de "objtext", así:
//get the objtext element var objtext=document.getElementById("objtext"); //detect keypress objtext.addEventListener("keydown",(e)=>{ //detect new line if(e.key="Enter"){ //add an ordered list element } if(e.key="Backspace"){ //check what key was deleted //how can this be done? if("\n" was removed){ //remove an ordered list element } //and what about when a new line was removed? if(some text was removed such that it removes a line){ //remove an ordered list element } }else if(some text was added such that it adds a line){ //add an ordered list element } });Pero incluso si pudiera descifrar eso, el uso de enter para obtener una nueva línea solo funciona para los nuevos párrafos, ¿qué pasa con las veces que el texto se desborda del área de texto en una nueva línea? ¿Y qué pasa cuando se usa la tecla de retroceso para eliminar algunas palabras de modo que retrocede una línea?
¿Como se puede hacer esto?
Como dije en los comentarios, tal vez contar los saltos de línea en cada pulsación de tecla sea lo más fácil.
Tenga en cuenta que cuando una línea se ajusta debido a que no hay suficiente espacio dentro del área de textarea , no contaremos el ajuste como un salto de línea.
const objtext = document.getElementById("objtext"); objtext.addEventListener("keyup", (event) => { const output = document.getElementById("output"); const lines = event.target.value.split('\n').length; // now do with lines what you like output.textContent = `The textarea has ${lines} line breaks`; }); #output { display: block; margin-top: 1rem; } <textarea id="objtext"></textarea> <span id="output">The textarea has 0 line breaks</span>