I'm trying to implement a simple script to manage resizing the textarea to fit the content. It works perfectly when adding content but every time I press the backspace key the scrollheight value increases by 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>Does anyone know the cause of this annoying behaviour?
I finally figured out what the problem was (and how to fix it). The solution was to set the height of the textarea to auto before resizing it to fit the contents (see below). I would be curious to know why this works...
/* 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`
})
})
Explaining this requires understanding the box model. In this case, you are using scrollHeight, which includes borders and padding of the element - this is why the height is incrementing on any change.
For this I'm assuming you just want the textarea to expand when it's about to overflow, i.e. a scrollbar appears. Rather than having it change on every input event, check only if the scrollHeight exceeds the clientHeight. Whenever that occurs, increase the rows of the textarea in order to expand it.
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>Problem:
You addEventListener to any input
Solution:
Filter by keycode
this.onkeyup = function(e) {
if (e.keyCode != 32) {
// Your code here
}
}
You can use this site to know the for any keyboard input keycode.info
You can find snipt
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>