Javascript 将TextArea中的文本限制为TextArea的实际区域

我看到的大多数关于文本区域的问题都是关于限制字符的，我不想这样。我想知道如何将TextArea html元素的可编辑区域限制为实际的TextArea本身。这可能吗

例如：

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

---

是否有任何javascript可以解决此问题？

将maxlength attr设置为120

示例链接在这里

---

将maxlength属性设置为120

示例链接在这里

---

将文本复制到一个

可见性：隐藏的
div中，字体样式等于textarea，最大宽度
不会超出您的列数。如果文本隐藏副本的高度超过限制，请删除添加的文本

以下内容与您的需求非常接近。不幸的是，在第5行输入内容之前，它不会禁用第5行（在第4行中按enter键之后），并且它会在第5行中留下几个字符（如果从第4行换行到第5行）。我不确定如何进一步完善这项技术


var$measure=$（'#measure'）；
var$input=$（“#input”）；
变量$output=$（“#度量”）；
var existingText=''；
$input.on（'keyup'，函数（事件）{
$measure.html（$input.val（））；
$output.val（$measure.width（）+'x'+$measure.height（）+'px'）；
如果（$measure.height（）>60）{
$input.val（existingText.trim（））；
$measure.html（existingText.trim（））；
}
existingText=$input.val（）；
});
#测量
{
位置：绝对位置；
可见性：隐藏；
高度：自动；
宽度：自动；
空白：预包装；
/*将字体样式设置为文本区域的样式*/
字体系列：monospace；
字体大小：13px；
字母间距：正常；
线高：正常；
字距：0；
单词包装：打断单词；
最大宽度：221px；
边框：1x纯黑；
保证金：2倍；
填充：2px；
}



将文本复制到一个
可见性：隐藏的
div中，字体样式与textarea相同，并且最大宽度
不会超出您的列数。如果文本隐藏副本的高度超过限制，请删除添加的文本

以下内容与您的需求非常接近。不幸的是，在第5行输入内容之前，它不会禁用第5行（在第4行中按enter键之后），并且它会在第5行中留下几个字符（如果从第4行换行到第5行）。我不确定如何进一步完善这项技术


var$measure=$（'#measure'）；
var$input=$（“#input”）；
变量$output=$（“#度量”）；
var existingText=''；
$input.on（'keyup'，函数（事件）{
$measure.html（$input.val（））；
$output.val（$measure.width（）+'x'+$measure.height（）+'px'）；
如果（$measure.height（）>60）{
$input.val（existingText.trim（））；
$measure.html（existingText.trim（））；
}
existingText=$input.val（）；
});
#测量
{
位置：绝对位置；
可见性：隐藏；
高度：自动；
宽度：自动；
空白：预包装；
/*将字体样式设置为文本区域的样式*/
字体系列：monospace；
字体大小：13px；
字母间距：正常；
线高：正常；
字距：0；
单词包装：打断单词；
最大宽度：221px；
边框：1x纯黑；
保证金：2倍；
填充：2px；
}



此解决方案非常简单，适合我：

使用“溢出：隐藏”和“调整大小：无”设置文本区域的样式。这将隐藏卷轴
禁止并阻止用户自行调整文本区域的大小

设置所需的文本区域尺寸。（即rows=“4”cols=“50”）

使用oninput事件将文本区域的高度与文本区域的高度进行比较
纸卷当滚动条比文本区域高时，从文本区域中删除一个字符
输入结束。此循环将继续，直到滚动不再超过
文本区域的高度（即没有滚动条，文本区域保持其所需大小）

oninput非常健壮，因为无论是键盘事件还是复制粘贴，每当textarea获得用户输入时，它都会触发


此解决方案非常简单，适合我：

使用“溢出：隐藏”和“调整大小：无”设置文本区域的样式。这将隐藏卷轴
禁止并阻止用户自行调整文本区域的大小

设置所需的文本区域尺寸。（即rows=“4”cols=“50”）

使用oninput事件将文本区域的高度与文本区域的高度进行比较
纸卷当滚动条比文本区域高时，从文本区域中删除一个字符
输入结束。此循环将继续，直到滚动不再超过
文本区域的高度（即没有滚动条，文本区域保持其所需大小）

oninput非常健壮，因为无论是键盘事件还是复制粘贴，每当textarea获得用户输入时，它都会触发



您的限制将是两件事：1。总共120个字符-或-2个字符。4行（4个字符）您应该为此编写客户端验证。它并不像那样简单。如果用户按enter键两次，然后写一个占3行的段落，那么他们输入的字符将少于120个，并且只有两个回车符。您的限制将是两件事：1。总共120个字符-或-2个字符。4行（4个\n字符）您应该编写客户端验证以实现此效果