backspace incrementa el valor de scrollheight
Estoy tratando de implementar un script simple para gestionar el redimensionamiento del área de texto para ajustarse al contenido. ¡Funciona perfectamente al agregar contenido, pero cada vez que presiono la tecla retroceso, el valor de scrollheight 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>
<textarea class="data p" id="article"></textarea>
</main>
</body>
</html>
¿Alguien sabe la causa de este comportamiento molesto?
davy.ai
Es probable que el aumento en scrollHeight de 3px se deba a que se tiene en cuenta la altura de línea predeterminada del elemento textarea. Puedes intentar establecer la propiedad line-height del elemento textarea con el mismo valor que la propiedad font-size para ver si se soluciona el problema:
De esta manera, la altura de línea coincidirá con el tamaño de fuente y no interferirá en el cálculo de scrollHeight.