CR和CF的javascript textarea maxlength问题

Question

我在计算javascript最大长度时遇到问题。

Javascript

function charCount(characters) {
document.getElementById('citation').onkeyup = function () {
var s = this.value;
document.getElementById('sBann').innerHTML = (characters - s.length) + " characters left.";
};
}

JSP:

<div class="FormRow">
<textarea class="textAreaLarge" rows="20" cols="180" name="citation" id="citation" maxlength="<%=maxCitationLength%>" onKeyUp="charCount(<%=maxCitationLength%>);"><%=citation%></textarea>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<strong><div id="sBann" class="minitext"><% if (citation != null) { %><%= (maxCitationLength-citation.length()) %><%} else {%><%= (maxCitationLength) %><%}%> characters left.</div></strong>
</div>

我的文本区域的最大长度为1650，应该也包括空格。我有一个创建页面。当我在UI中键入某些内容时，它将行尾考虑为1个字符，最多允许1650个字符，并防止用户输入更多字符。但是在服务器端，行的末尾被取为CR和CF的2个字符，并且尽管JS计算1650；1650，例如1680。在DB方面，该字段是一个clob，因此即使它存储>1650.

现在我有一个编辑屏幕，在那里我必须显示相同的文本区域，并允许用户进行编辑。对于上面我输入1650但DB显示1680的相同示例，UI中的文本区域显示1680个字符，因此显示剩余字符数的加载跨度为-20，因为服务器端包含CR/CF值。

如何处理客户端验证以包含CR/CF的2个字符？

Answer 1

其回车CR和换行LF。在Windows上，如果你的console.log()文本区域值不会返回CR or r，它只返回n，我不确定在mac os上。

您有重复的事件

onKeyUp="charCount(<%=maxCitationLength%>);"
// and
document.getElementById('citation').onkeyup = function () {

在元素属性或脚本标记中只调用一次。

要将CR/LF计数为两个字符，请使用regex

document.getElementById('citation').oninput = function(e) {
var maxChars = 20;
var sBann = document.getElementById('sBann');
var s = this.value;
// count linebreak
var lineBreaks = s.match(/(?!n$)n/g) || '';
var charCount = s.length + lineBreaks.length;
if (charCount > maxChars) {
this.value = s.slice(0, maxChars - lineBreaks.length);
sBann.innerHTML = "0 characters left.";
return false;
}
sBann.innerHTML = (maxChars - charCount) + " characters left.";
console.log('s: ' + (s.length - lineBreaks.length), '|', 'line break (x2): ' + lineBreaks.length * 2);
console.log('total: ' + charCount)
};

<div class="FormRow">
<textarea class="textAreaLarge" rows="10" cols="40" name="citation" id="citation" maxlength="20"></textarea>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<strong><div id="sBann" class="minitext">20 characters left.</div></strong>
</div>

Answer 2

考虑以下内容。

$(function() {
function charactersLeft(el) {
var max = parseInt($(el).attr("maxLength"));
var cur = $(el).val().length;
return max - cur;
}
function allowType(el) {
var result = true;
if (charactersLeft(el) <= 0) {
result = false;
}
return result;
}
function myTrim(el, str) {
var value = $(el).val();
value.replace(str, "");
$(el).val(value);
}
$(".minitext > span").html(charactersLeft(".textAreaLarge"));
$("#citation").on("keyup", function(e) {
myTrim(this, "r");
$(".minitext > span").html(charactersLeft(".textAreaLarge"));
if (!allowType(this)) {
return false;
}
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="FormRow">
<textarea class="textAreaLarge" rows="20" cols="180" name="citation" id="citation" maxLength="1650"></textarea>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<strong><div id="sBann" class="minitext"><span></span> characters left.</div></strong>
</div>

使用keyup，我们可以返回false来防止击键事件。