防止 <textarea> 的大小调整和滚动

Posted 2023-05-07

【中文标题】防止 <textarea> 的大小调整和滚动

【英文标题】：Prevent resizing and scrolling of <textarea>

【发布时间】：2014-09-04 03:29:52

【问题描述】：

我想在我的网页上添加<textarea>。其中最多可以包含 21 行。当更多元素进入页面时，我想防止重新调整文本区域的大小。我通过提供maxlength 属性部分获得了它。但是使用行号的计数是无效的。因为如果有人给出 1 个新行并输入一些数据，那么行顺序将给出一个真实值，但最大长度给出错误值。

假设我的 textarea 有 maxlength=100 并且一行最多可以包含 10 个字母。我将行号限制为 10。如果我给 10 个空白 enter 按键，那么它将在第 10 行停止。如果我给 100 个字符，那么它也将正常工作。但是，如果我在 !st 行输入 1 个字符，然后按 Enter，在第二行输入一个字符，然后按 Enter。然后文本区域将允许多 98 个字符，这将调整 textarea

有没有办法防止使用 textarea 的宽度重新调整大小？请帮忙

【问题讨论】：

这个答案展示了如何使用 jQuery 限制行数：***.com/a/6501310/2038464 这个答案展示了如何防止在 chrome 中调整 textarea 的大小：***.com/a/11401654/2038464

@Oleg：谢谢你的建议。我已经试过了。但它不会满足我给出的条件.. :(

对不起，我不明白你的问题。您能否包含用于此文本区域的 html 和/或 javascript 代码？另外，你测试的是什么浏览器？

This fiddle 很有帮助。但是当一行完成时它不会进入新行:(

【参考方案1】：

防止使用 CSS resize 属性调整大小：

.txt 
   resize: none;

防止用户在文本区域中添加过多的值：

<textarea maxlength="100" accesskey="10" row="10"></textarea>

最终代码：

<textarea maxlength="100" class="txt" accesskey="10" row="10" style="resize:none">
   My text is
</textarea>

【讨论】：

这并不能完全解释 Chrome、IE 和 Safari 中每行参数的 10 个值，但在 Firefox 和 Opera 中经过测试和工作（无论出于何种原因，它在 Opera 中工作但不是 Chrome 时我试过了。）