Javascript 根据textarea的高度和宽度设置textarea中的最大字符数

注意：我尝试了与此主题相关的所有问题和答案

我想根据文本区域的高度和宽度限制字符数。。假设我设置了Textarea

高度：50px
和
宽度：60px所以我想阻止字符在完成文本区域后出现

注意：按文本区域设置最大字符数
高度
和
宽度

相关搜索链接




.textareaClass{
高度：50px；
宽度：60px；
调整大小：无；
溢出：隐藏
}
我创建了一个代码，查看文本区域的宽度和高度适合多少字符，并根据该数字设置文本区域的最大长度


$（'.textareaClass'）。按键（函数（）{
让宽度=$（this.css（'width'）。替换（//[^-\d\.]/g'，）；//获取文本区域的宽度
let height=$（this.css（'height'）。replace（//[^-\d\.]/g'）；//获取textarea的高度
设widthchar=Math.floor（parseInt（width）/7.5）；//基于宽度，字符横向适合的数量
让heightchar=Math.floor（parseInt（height）/15）；//根据高度，有多少行字符
让totalchar=widthchar*heightchar；//将行与字符横向相乘，得到字符总数
$（this.attr（'maxlength'，totalchar）；//将总计设置为文本区域的总计
$（“.char”）.html（'允许您键入：'+totalchar+'character）；//输出以查看您可以键入多少字符，仅用于调试/编程原因，以查看发生了什么
});
.textareaClass{
高度：100px；
宽度：50px；
调整大小：无；
溢出：隐藏
}
您可以将
高度
和
宽度
属性设置为ch（字符）单位。并将
maxlength=“（宽度）*（高度/行高）”
属性设置为
textarea


.textareaClass{
高度：10厘米；
宽度：10厘米；
线高：2ch；
调整大小：无；
溢出：隐藏
}

那么您基本上想要一个没有溢出的文本区域？或者，当with和height的总和为300px或with:50px和height 50px时，是否确实要手动设置例如300chars max？可以通过代码的脏度来查看此解决方案？可以创建一个jquery函数，该函数获取textarea的宽度和高度，乘以该值，然后计算每个字符需要多少空间。然后根据计算出的字符所需的空间大小，以及在文本区域中输入内容时，这些字符中有多少适合总计。您必须检查字符串的长度，每个字符都有自己的大小，一个for循环来获取字符大小并累加结果。当你有它（你的字符串宽度），如果你键入另一个字符，你的字符串超过了文本区域。执行js脚本以删除输入。这只是一个想法，你需要处理很多案件。（通过获得线宽并计算包裹线来确定高度，…）。某些用户对其大小或自定义字体的偏好可能会破坏您的脚本。@RamondeVries我试图阻止基于文本区域高度和宽度的字符。意思是我已经分配了高度和宽度，所以textarea已满，所以可以输入更多字符。这不符合预期。检查我的答案。这是滚动。嗯，这在你键入内容时有效，但在我粘贴文本时无效。您还应该侦听粘贴事件。@Ramonde我已经尝试了您的代码，但有一段时间输出错误。我设置了高度：100px；宽度：500px；因此，还有更多的空间。你能帮我们吗。而whit空格也会计算文本长度。不排除空白。再次检查，请提供@RamondeVries已经提供的px-wise.px解决方案。我提出了另一个有用的简单方法。我尝试了你的代码，但没有任何通用的px解决方案，因为我的要求是px明智的。知道1ch=多少像素吗？