0

mi pregunta es bastante consiza, tengo una codigo para cambiar el tamaño de los textarea cuando alguien está escribiendo:

if (e.target.tagName.toLowerCase() == 'textarea') {
    let contador = 0;
    for (i = 0; i < e.target.value.length; i++)
      e.target.value[i] == '\n' ? (contador += 1) : null;
    e.target.rows = contador + 1;
  }

La cosa es que me he dado cuenta que esto baja el rendimiento de esa parte de la aplicación, ya que estoy haciendo un recorrido cada vez que un usuario escribe, ahora, si una frase tiene 100 palabras, son 100 recorridos del for :CCCCC, lo cual no me parece muy malo, como podría mejorar este codigo?

edit: Se me olvidó poner el evento que ejecuta esto:

document.querySelector('.ctn-toDoList').addEventListener('keydown', e => {
  if (e.target.tagName.toLowerCase() == 'textarea') {
    let contador = 0;
    for (i = 0; i < e.target.value.length; i++)
      e.target.value[i] == '\n' ? (contador += 1) : null;
    e.target.rows = contador + 1;
  }
});
3
  • ¿Cuál evento estás escuchando para aplicar esta función?¿Quién la invoca?
    – FranAcuna
    el 6 ene. 2021 a las 19:25
  • @FranAcuna maaan JAJAJAJ, se me olvidó ponerlo, espere y edito la publi. el 6 ene. 2021 a las 19:26
  • ¿Y si haces que incremente el contador cada vez que el usuario presiona enter y el textarea esta activo? Porque al final de cuentas estás recorriendo todo el textarea para ver si incrementas en 1 el contador porque alguién ingreso un nuevo carácter de tipo newline.
    – FranAcuna
    el 6 ene. 2021 a las 19:34

3 respuestas 3

0

Entiendo, según tu código, que intentas hacer una nueva línea cada que presionas enter.

Esta es una opción en la que en lugar de editar las filas de tu textarea vas a incrementar o decrecer el tamaño del recuadro (height). Puedes agregar además un overflow-y: hidden para ocultar la barra de scroll.

function textareaNewSize(textarea) {
   textarea.style.height = "0px";
   textarea.style.height = textarea.scrollHeight + "px";
}
textarea {
  overflow-y: hidden;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Tu textarea</h1>
<textarea class="ctn-toDoList" onkeyup="textareaNewSize(this);"></textarea>

</body>
</html>

0

Una opción es crear una variable para obtener el textarea y asignar el atributo de altura desde que se carga la página y el evento onInput para que se apliquen los cambios al escribir o cortar y pegar.

// Obtener el elemento
let textarea = document.querySelector('.ctn-toDoList');
// Cambiar atributos de estilo, asignando altura de acuerdo a contenido inicial
textarea.setAttribute('style', 'height: ' + (textarea.scrollHeight) + 'px; overflow-y:hidden;');
// Asignar evento onInput
textarea.addEventListener("input", textareaOnInput, false);

function textareaOnInput(e) {
  // Es necesario usar primero "auto" y, después, la altura de scroll
  e.target.style.height = 'auto';
  e.target.style.height = (e.target.scrollHeight) + 'px';
}
<textarea class="ctn-toDoList">Escribe para ver cómo funciona, puedes comenzar con un texto largo y se va a adaptar.</textarea>

Adaptado de esta respuesta en SO en inglés

0

he cogido un poco de ambas respuestas, por lo cual al final quedó de la siguiente manera:

document.querySelector('.ctn-toDoList').addEventListener("input", (e)=>{
  if (e.target.tagName.toLowerCase() == 'textarea') {
    e.target.style.height = 'auto';
    e.target.style.height = `${e.target.scrollHeight}px`;
  }
}, false);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.