Javascript 对粘贴到输入字段中的文本进行字符计数的正确方法是什么？

我有一个带有输入计数器的自动扩展表单字段，其中文本区域有一个maxLength。如果键入或粘贴多行，onKeyUp字段将自动扩展该区域，并触发计数的重新计算。这很好，但当我故意粘贴比允许的1024个字符长的文本（1029个字符）时，就会出现不一致

处理输入的正确方法是什么？实际长度是多少

我省略了不相关的CSS和PHP部分，因为问题的发生与此代码无关

使用计算javascript样式（len=element.value.length）时，粘贴文本后将正确显示（1024/1024），过长文本的最后五个字符将被截断。到目前为止还不错，但此后用户必须删除更多的特许，直到计数器显示（1015/1024），然后才能键入一个新字符。因此，突然间，虚拟最大长度1016似乎很有效

建议的解决方案不是100%的解决方案。这只是为了计数而替换换行。使用此代码，粘贴相同文本时计数器现在将显示（1033/1024）

守则：

update_textlen（document.getElementById（'item.text'）；
函数更新_textlen（字段）{
//计算文本中使用的maxLenght字符数
var maxlen=field.maxLength；
//var len=field.value.length；//旧样式
var len=field.value.replace（/\n/g，“\r\n”）.length；
var message=“（“+len+”/“+maxlen+”）；
var target=field.id+“.len”；//消息的div id
document.getElementById（target.innerHTML=message；
}
函数resize_textarea（区域）{
//自动展开文本区域以适应新的行数
area.style.height=“20px”；
area.style.height=（area.scrollHeight）+“px”；
}

#项目包装{
宽度：502px；
边距：8px 8px 8px 8px；背景：#eee；
填充：16px；
/*背景：-webkit渐变（线性、左上、左下、从（#eee）到（#ccc））*/
/*背景：-moz线性梯度（顶部、eee、ccc）*/
-webkit边界半径：8px；
-moz边界半径：8px；
}
.form-style-2019输入[type=“text”]，
.form-style-2019文本区域，
.form-style-2019选择
{
背景：#FFF；
左边距：3倍；
边缘顶部：6px；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
宽度：100%；
显示：块；
大纲：无；
边界：无；
高度：20px；
线高：20px；
字号：17px；
填充：0；
字体系列：摩纳哥、Courier、mono space；
}

文本输入：（128/1024）
第1行Bla Bla Bla
第2行测试123

$（文档）.ready（函数（）{
$（'button'）。在（'click'，function（）上{
警报（$（'.field'）.val（）.replace（/\s+/g'，）.length）；
})
});
.wrap{
利润率：10px；
}

点击
一位离线朋友和经验丰富的后端开发人员用这种方式向我解释了这一点。由于我们必须对输入进行后期处理，而且在许多编程语言中，我们以后可能必须添加斜杠来转义这些字符，因此使用较低的“虚拟”计数作为长度限制更为明智。因此，在上面的示例中，当在平台上处理此字符串时，还需要剪切9个字符以确保安全

在这种情况下，更新后的函数应如下所示：


功能更新\u文本（字段）{
//计算文本字段中maxLenght使用的字符数，并将其报告给div
var maxlen=field.maxLength；
var fval=字段值；
var flen=fval.长度；
var tlen=fval.replace（/\n/g，“\r\n”）.长度；
var-dlen=tlen-flen；
var=0；
//现在，如果需要，请剪辑结尾的更多字符
如果（tlen>maxlen）{
field.value=fval.substring（0，（maxlen-dlen））；
var tlen=field.value.replace（/\n/g，“\r\n”）.length；
var warn=（“输入超过了“+maxlen+”允许的字符数！”）；
}
变量计数器=“（“+tlen+”/“+maxlen+”）”；
var target=field.id+“.len”；
document.getElementById（target.innerHTML=计数器；
如果（警告）{
警惕（警告）；
}
}
更新_textlen（document.getElementById（'item.text'）；
函数resize_textarea（区域）{
//自动展开文本区域以适应新的行数
area.style.height=“20px”；
area.style.height=（area.scrollHeight）+“px”；
}
#项目包装{
宽度：502px；
保证金：8px 8px 8px 8px；
背景：#eee；
填充：16px；
/*背景：-webkit渐变（线性、左上、左下、从（#eee）到（#ccc））*/
/*背景：-moz线性梯度（顶部、eee、ccc）*/
-webkit边界半径：8px；
-moz边界半径：8px；
}
.form-style-2019输入[type=“text”]，
.form-style-2019文本区域，
.form-style-2019选择{
背景：#FFF；
左边距：3倍；
边缘顶部：6px；
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
宽度：100%；
显示：块；
大纲：无；
边界：无；
高度：20px；
线高：20px；
字号：17px；
填充：0；
字体系列：摩纳哥、Courier、mono space；
}

文本输入：
(128/1024)
第1行Bla Bla Bla
第2行测试123
您会遇到HTML标记错误，例如
当php内联生成一组多个div时，识别div的结尾是一种软样式，我知道这不是正确的HTML。带ID或不带ID的结束DIV与问题解决方案无关。：-）看起来很有趣，但将相同的文本粘贴到“运行代码段”中会导致计数为846，这一数字与实际粘贴的字符数相差更大。此选项也不包括空格。从计数中排除更多项目只会进一步伪造计数器显示。