退格键增加滚动高度的值答案

【问题标题】：backspace increases value of scrollheight退格键增加滚动高度的值
【发布时间】：2022-01-01 20:32:03
【问题描述】：

我正在尝试实现一个简单的脚本来管理调整文本区域的大小以适应内容。添加内容时效果很好，但每次我按退格键时，滚动高度值都会增加 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>

有人知道这种烦人行为的原因吗？

【问题讨论】：

能否包含 CSS 以便对其进行测试？我注意到，在尝试使用您的代码时，即使没有创建滚动条，文本框也会在每次击键时调整大小。这是有意的还是应该只在内容增长到创建滚动条时才进行大小调整？
CSS 与问题无关，我不应该包含链接，但我会在此处添加。每当内容更改时，代码都会检查，但我愿意接受任何建议。
你在什么浏览器上运行这个？我在 Chrome 上，它似乎有奇怪的行为。在我看来，textarea 的高度是从单个字符按下增加的。我怀疑您使用退格键看到的任何行为都可能是特定于浏览器的。
这个问题最初是在 Safari 中发现的，但是我在 Chrome 中得到了相同的行为。
"退格增加滚动高度的值" False.任何键都可以。

标签： javascript html dom

【解决方案1】：

我终于弄清楚了问题所在（以及如何解决它）。解决方案是将 textarea 的高度设置为 auto，然后再调整其大小以适应内容（见下文）。我很想知道为什么这行得通...

/* 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`
  })
})

【讨论】：

这里解释了auto 的工作原理：w3.org/TR/CSS2/visudet.html#root-height。根据我在这里收集的信息，元素高度的auto 值将修剪未使用的区域或在需要时扩展，以便所有内容都可见并修剪任何未使用的部分。

【解决方案2】：

解释这一点需要了解box model。在这种情况下，您使用的是 scrollHeight，其中包括元素的边框和填充 - 这就是高度随任何变化而增加的原因。

为此，我假设您只希望文本区域在即将溢出时展开，即出现滚动条。与其在每个输入事件上都更改它，不如只检查 scrollHeight 是否超过了 clientHeight。每当发生这种情况时，增加 textarea 的 rows 以扩展它。

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>

【讨论】：

奇怪的是，这与我的第一次尝试非常相似，但是我意识到当内容变短时 textarea 并没有缩小。
这并没有像预期的那样缩小。

【解决方案3】：

问题：

您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>

【讨论】：

感谢您的回答。遗憾的是，这不会调整元素的大小，它会在每次按下字母时添加一个额外的事件处理程序。我也相信onkeyup 和keyCode 已被弃用。
谢谢你，我想帮忙