Question

我有一个带有可变宽度字体的textarea，我需要确保用户无法在不滚动的情况下输入比“适合”textarea更多的文本。

简单地捕获keydown和preventDefault()意味着我无法涵盖用户在textarea中粘贴东西的用例。

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

我该怎么做？

Answer 1

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

请参阅代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

纯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
})

将textarea限制为“适合”

1 个答案: