我正在嘗試實作一個簡單的腳本來管理調整 textarea 的大小以適應內容。添加內容時效果很好，但每次按退格鍵時，滾動高度值都會增加 3 像素！
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`
})
})/* style.css */
main, header {
max-width: 600px;
margin: auto;
}
textarea {
font-family: 'Times New Roman', Times, serif;
border-style: hidden;
outline: none;
padding: 0.1em;
margin: none;
resize: none;
width: 80%;
}
textarea:focus {
border: 1px solid #DDD;
border-radius: 0.2em;
}<!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>有誰知道這種煩人行為的原因？
uj5u.com熱心網友回復：
解釋這一點需要理解盒模型。在這種情況下，您使用的是scrollHeight，其中包括元素的邊框和內邊距 - 這就是高度隨任何變化而增加的原因。
為此，我假設您只希望 textarea 在即將溢位時擴展，即出現滾動條。與其在每個輸入事件上更改它，不如僅檢查 scrollHeight 是否超過 clientHeight。每當發生這種情況時，請增加rowstextarea 的 以擴展它。
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>uj5u.com熱心網友回復：
問題：
你addEventListener對任何輸入
解決方案：
過濾 keycode
this.onkeyup = function(e) {
if (e.keyCode != 32) {
// Your code here
}
}
您可以使用此站點了解任何鍵盤輸入的 keycode.info
你可以找到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>uj5u.com熱心網友回復：
我終于弄清楚問題是什么（以及如何解決它）。解決方案是在調整文本區域的大小以適應內容之前將其高度設定為自動（見下文）。我很想知道為什么這會起作用......
/* 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`
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/399367.html
標籤：javascript html dom