我正在寻找一种方法来限制对文本区域的输入，使用户输入能够保持在指定区域内，而无需对最大字符数进行不必要的限制。
明显的方法是 maxlength，但这意味着 maxlength 将由全部大写输入将占用多少空间来确定，这将需要一个不必要的低 maxlength。
还有各种 JS/jQuery 解决方案可以限制在文本区域中输入的行数(例如 Limit number of lines in textarea and Display line count using jQuery )，但据我所知，这些解决方案依赖于 ENTER键，但如果您将一段文本复制粘贴到文本区域则不起作用。
澄清
<!doctype html>
<head>
<style>
.one{
height: 60px;
width: 55px;
background-color: pink;
font-size: 16px;
}
</style>
</head>
<body>
<div class="one">i i i i i i i i i i i i i i i i i i</div>
<br>
<div class="one">M M M M M M M M M</div>
</body>
</html>
div one 可以包含 18 个小写的“i”，但只能包含 9 个大写的“M”，所以为了确保输入永远不会超过 div one，maxlength 必须设置为 9。一般结果是 Div一个区域通常不会被充分利用。
以上只是一个简单的例子，可以快速说明我想要什么样的输出。该解决方案应该通过表单文本字段绑定(bind)到输入。
想法？
干杯
最佳答案
我不认为这是一个容易解决的问题。可能有人比我更专业，但我能立即想到的唯一方法是创建一个字符映射并为它们分配宽度。使用此 map ，您可以将任何新输入与 map 进行比较，并确定输入的长度/宽度。
示例伪代码，这可能无法正常工作；
// YOUR CHAR MAP WITH WIDTHS ASSIGNED TO LETTERS
var charMap = {
i: 1,
M: 2
}
// MAX AMOUNT OF CHARACTERS
var charLimit = 18;
// ASSUME THE TEXTAREA IS EMPTY, COULD GET ACTUAL WIDTH HERE INSTEAD
var currentChars = 0;
$('textarea').on('change', function{
// GET ALL NEW INPUT
var chars = $(this).val();
// FOR LIMITING THE INPUT, THIS IS THE FINAL STRING THAT WILL END UP IN THE TEXTBOX
var limitedUserInput = '';
// CHECK EACH CHAR ONE BY ONE, COMPARING ITS WIDTH USING THE MAP
for(var x = 0; x < chars.length; x++){
currentChars += chars[x];
// IF SIZE LIMIT NOT HIT, ADD CHARACTER TO OUTPUT STRING
if(currentChars < charLimit){
limitedUserInput += chars[x];
}
}
// DISPLAY THE OUTPUT IN THE TEXT AREA (TRIMMING ANY EXTRA CONTENT)
$(this).html = limitedUserInput;
})
这将使您拥有 18 x charMap.i (18) 或 9 x charMap.M (18)。
我希望这能说得通。
关于javascript - 没有不必要的约束限制文本区域的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32891841/