javascript - 将文本区域中的文本限制为元素的实际区域

Question

我见过的大多数关于 TextArea 的问题都询问有关限制字符的问题。我不想要这个。我想知道如何将 TextArea html 元素的可编辑区域限制为实际的文本区域本身。这可能吗？

示例:

假设我有一个 30 列 x 4 行的 TextArea。您可以将该区域中的文本限制为 120 个字符，但这不会阻止用户按回车键 5 次并且已经超出了我为其设置的给定区域。我不想出现滚动条。

是否有任何 JavaScript 可以解决这个问题？

Answer 1

这个解决方案非常简单并且适合我:

1. 使用“overflow:hidden”和“resize:none”设置文本区域的样式。这将隐藏滚动条栏并阻止用户自行调整文本区域的大小。

2. 设置文本区域所需的尺寸。 (即 rows="4"cols="50")

3. 使用input事件处理程序将文本区域的高度与滚动的高度进行比较。当滚动条比文本区域高时，从输入末尾删除一个字符。此循环将继续，直到滚动不再超过文本区域的高度(即没有滚动条并且文本区域保持所需的大小)。

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  while (textarea.clientHeight < textarea.scrollHeight) {
    textarea.value = textarea.value.substr(0, textarea.value.length - 1);
  }
});

textarea {
  overflow: hidden;
  resize: none;
}

<textarea rows="2" cols="20"> </textarea>