将 textarea 限制为“适合”的文本

Posted 2023-05-07

【中文标题】将 textarea 限制为“适合”的文本

【英文标题】：Limit textarea to text that "fits"

【发布时间】：2016-09-18 07:29:52

【问题描述】：

我有一个可变宽度字体的文本区域，我需要确保用户在不滚动的情况下输入的文本不能超过文本区域“适合”的文本。

简单地捕获 keydown 和 preventDefault()'ing 意味着我无法涵盖用户在文本区域中粘贴内容的用例。

计算文本的宽度并不能帮助我确定有多少文本 适合该框。

我该怎么做？

【问题讨论】：

根本不要使用javascript。您可以使用 css 例如overflow-x: hidden;

您总是可以创建一个自动扩展的文本区域 - 不会滚动，这是一个选项吗？我可以帮你。

这不是我的问题，而是我需要来防止里面的文本溢出。就像在一样，我至少应该知道有多少文本从固定大小的 px、可变大小的字符框中溢出，并防止它最终出现在 textarea 的值中

您好，我遇到了同样的问题，想请问有没有新的解决方案？

【参考方案1】：

如果您不介意使用 jQuery，解决方案非常简单。首先，将 textarea 的当前值保存在一个变量中。然后在 textarea 上监听input 事件，通过比较this.scrollHeight 和this.clientHeight 来检查它是否有滚动条。如果是这样，请将 textarea 值更改为以前的值。最后，将当前的 textarea 值赋给lastValue 变量。

见代码sn-p：

var lastValue = $("textarea").val()
$("textarea").on("input", function(event) 
  if (this.scrollHeight > this.clientHeight) 
    $("textarea").val(lastValue)
  
  lastValue = $("textarea").val()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

纯 JavaScript 解决方案：

const textarea = document.querySelector("textarea")
var lastValue = textarea.value
textarea.addEventListener("input", function(event) 
  if (this.scrollHeight > this.clientHeight) 
    textarea.value = lastValue
  
  lastValue = textarea.value
)