Estoy tratando de implementar un script simple para administrar el cambio de tamaño del área de texto para que se ajuste al contenido. Funciona perfectamente al agregar contenido, pero cada vez que presiono la tecla de retroceso, ¡el valor de altura de desplazamiento aumenta en 3px!
document.querySelectorAll('textarea').forEach( element => { element.style.height = `${element.scrollHeight}px` element.addEventListener('input', event => { event.target.style.height = `${event.target.scrollHeight}px` }) }) /* style.css */ main, header { max-width: 600px; margin: auto; } textarea { font-family: 'Times New Roman', Times, serif; font-size: 1em; border-style: hidden; outline: none; padding: 0.1em; margin: none; resize: none; width: 80%; border-radius: 0.2em; border: 1px solid #EEE; } textarea:focus { border: 1px solid #DDD; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8" /> <meta name="viewport" content="width=device-width", initial-scale="1.0" /> <title>Resizing Text Area</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="module" src="./script.js" defer></script> </head> <body> <header> <h1>Resizing Text Area</h1> </header> <main> <p><textarea class="data p" id="article"></textarea></p> </main> </body> </html>¿Alguien sabe la causa de este molesto comportamiento?
Finalmente descubrí cuál era el problema (y cómo solucionarlo). La solución fue establecer la altura del área de texto en automático antes de cambiar su tamaño para que se ajuste al contenido (ver más abajo). Me gustaría saber por qué funciona esto...
/* script.js */ console.log('script loaded') document.querySelectorAll('textarea').forEach( element => { element.style.height = `${element.scrollHeight}px` element.addEventListener('input', event => { event.target.style.height = 'auto' // added this line event.target.style.height = `${event.target.scrollHeight}px` }) })Explicar esto requiere entender el modelo de caja . En este caso, está utilizando scrollHeight , que incluye bordes y relleno del elemento; es por eso que la altura aumenta con cualquier cambio.
Para esto, supongo que solo desea que el área de texto se expanda cuando esté a punto de desbordarse, es decir, aparece una barra de desplazamiento. En lugar de hacer que cambie en cada evento de entrada, compruebe solo si scrollHeight supera a clientHeight. Siempre que eso ocurra, aumente las rows del área de texto para expandirlo.
document.querySelectorAll('textarea').forEach(element => { element.addEventListener('input', event => { while (event.target.scrollHeight > event.target.clientHeight) { event.target.rows++; } }); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8" /> <meta name="viewport" content="width=device-width" , initial-scale="1.0" /> <title>Data Management</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="module" src="./script.js" defer></script> </head> <body> <header> <h1>Data Management</h1> </header> <main> <p><textarea class="data p" id="article"></textarea></p> </main> </body> </html>Problema:
addEventListener a cualquier entrada
Solución:
Filtrar por keycode
this.onkeyup = function(e) { if (e.keyCode != 32) { // Your code here } }Puede usar este sitio para conocer cualquier entrada de teclado keycode.info
Puedes encontrar un fragmento
document.querySelectorAll('textarea').forEach(element => { element.style.height = `${element.scrollHeight}px` this.onkeyup = function(e) { if (e.keyCode != 32) { element.addEventListener('input', event => { event.target.style.height = `${event.target.scrollHeight}px` }) } } }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8" /> <meta name="viewport" content="width=device-width" , initial-scale="1.0" /> <title>Data Management</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="module" src="./script.js" defer></script> </head> <body> <header> <h1>Data Management</h1> </header> <main> <p> <textarea class="data p" id="article"></textarea> </p> </main> </body> </html>