我有一个带有输入计数器的自动扩展表单字段，其中文本区域具有maxLength。如果在其中键入或粘贴了多行，onKeyUp字段将自动扩展区域，并触发计数的重新计算。效果很好，但是当我故意粘贴比1024允许的不一致长度更长的文本（1029个字符）时。
处理输入的正确方法是什么，真实长度是多少？
我省去了无关的CSS和PHP部分，因为问题独立于此代码而发生。
使用计算javascript样式（len = element.value.length）时，粘贴文本后它将正确显示（1024/1024），并且太长的文本的最后五个字符将被截断。到目前为止一切正常，但是此后，用户必须删除更多的宪章，直到计数器显示（1015/1024），然后才能输入一个新字符。因此突然虚拟的maxLength 1016似乎有效。
http://stackoverflow.com/questions/462348/建议的解决方案不是100％的解决方案。这仅用于替换换行符。使用此代码，粘贴相同的文本时计数器现在将显示（1033/1024）。
代码：
update_textlen(document.getElementById('item.text'));
function update_textlen(field) {
// count the characters used of maxLenght in text
var maxlen = field.maxLength;
// var len = field.value.length; // old style
var len = field.value.replace(/\n/g, "\r\n").length;
var message = "("+len+"/"+maxlen+")";
var target = field.id+".len"; // div id for message
document.getElementById(target).innerHTML = message;
}
function resize_textarea(area) {
//auto expand textarea to fit new number of lines
area.style.height = "20px";
area.style.height = (area.scrollHeight)+"px";
}#item-wrap {
width: 502px;
margin: 8px 8px 8px 8px; background: #eee;
padding: 16px;
/* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); */
/* background: -moz-linear-gradient(top, #eee, #ccc); */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.form-style-2019 input[type="text"],
.form-style-2019 textarea,
.form-style-2019 select
{
background: #FFF;
margin-left: 3px;
margin-top: 6px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: block;
outline: none;
border: none;
height: 20px;
line-height: 20px;
font-size: 17px;
padding: 0;
font-family: Monaco, Courier, mono-space;
}<div name="item" id="item-wrap">
<div id="item">
<form action="#" method="post" name="item.title" onsubmit="return false;" class="form-style-2019">
text input: <div style="float:right" id="item.text.len">(128/1024)</div>
<textarea id="item.text"
name="input"
wrap="virtual"
placeholder="text"
maxlength="1024"
onfocus="resize_textarea(this);update_textlen(this);"
onblur="update_textlen(this);resize_textarea(this);"
onkeyup="update_textlen(this);resize_textarea(this);"
tabindex="1">line1 Bla bla bla
line2 test 123</textarea>
</form>
</div>
</div>
粘贴的文本：
dummy text with words repeated until the maximum character count is reached.
and a line with a tab and return
occasionally repeated until the maximum character count is reached.
dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count is
and a line with a tab and return
occasionally repeated until the maximum character count is reached.
and a line with a tab and return
occasionally repeated until the maximum character count is reached.
dummy text with a long line and many words repeated until the maximum character count is reached. dummy text with a long line and many words repeated until the maximum character count.
and the last line with some numbers to see what goes missing 0123456789.
答案 0 :(得分：0)
pkg install econometrics-1.1.1.tar.gz
pkg load econometrics
$(document).ready(function(){
$('button').on('click', function(){
alert($('.field').val().replace(/\s+/g, '').length);
})
});.wrap{
margin: 10px;
}
答案 1 :(得分：0)
离线朋友和经验丰富的后端开发人员已通过这种方式向我解释了这一点。由于我们将不得不对输入进行后期处理，并且在许多编程语言中，我们可能以后必须添加斜杠来转义这些字符，因此使用较低的“虚拟”计数作为长度限制更为明智。因此，在上面的示例中，在平台上处理此字符串时，为了安全起见，还需要裁剪9个字符。
在这种情况下，更新后的功能应如下所示：
function update_textlen(field) {
// count the characters used of maxLenght in text field and report it to a div
var maxlen = field.maxLength;
var fval = field.value;
var flen = fval.length;
var tlen = fval.replace(/\n/g, "\r\n").length;
var dlen = tlen-flen;
var warn = 0;
// now clip more characters of the end if neeeded
if(tlen > maxlen){
field.value = fval.substring(0, (maxlen-dlen));
var tlen = field.value.replace(/\n/g, "\r\n").length;
var warn = ("input exceeded the "+maxlen+" allowed characters!");
}
var counter = "("+tlen+"/"+maxlen+")";
var target = field.id+".len";
document.getElementById(target).innerHTML = counter;
if(warn){alert(warn);}
}
update_textlen(document.getElementById('item.text'));
function resize_textarea(area) {
//auto expand textarea to fit new number of lines
area.style.height = "20px";
area.style.height = (area.scrollHeight)+"px";
}#item-wrap { width: 502px; margin: 8px 8px 8px 8px; background: #eee; padding: 16px; /* background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); */ /* background: -moz-linear-gradient(top, #eee, #ccc); */ -webkit-border-radius: 8px; -moz-border-radius: 8px; } .form-style-2019 input[type="text"], .form-style-2019 textarea, .form-style-2019 select { background: #FFF; margin-left: 3px; margin-top: 6px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; display: block; outline: none; border: none; height: 20px; line-height: 20px; font-size: 17px; padding: 0; font-family: Monaco, Courier, mono-space; }<div name="item" id="item-wrap">
<div id="item">
<form action="#" method="post" name="item.title" onsubmit="return false;" class="form-style-2019">
text input: <div style="float:right" id="item.text.len">(128/1024)</div>
<textarea id="item.text"
name="input"
wrap="virtual"
placeholder="text"
maxlength="1024"
onfocus="resize_textarea(this);update_textlen(this);"
onblur="update_textlen(this);resize_textarea(this);"
onkeyup="update_textlen(this);resize_textarea(this);"
tabindex="1">line1 Bla bla bla
line2 test 123</textarea>
</form>
</div>
</div>