CR和CF的javascript textarea maxlength问题

Question

我对 javascript maxlength 计算有疑问。

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>

我的 textarea 的最大长度为 1650，其中也应该包含空格。 我有一个创建页面。 当我在 UI 中输入内容时，它会将行尾视为 1 个字符，并允许最多 1650 个字符，并阻止用户输入更多字符。 但是在服务器端，CR 和 CF 的行尾被视为 2 个字符，虽然 JS 计算 1650，但数据被插入 CR 和 CF，DB 中的长度大于 1650，例如 1680。 在数据库方面，这个字段是一个 clob，所以即使它存储 > 1650 我也没有问题。

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

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

Answer 1

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

你有重复的事件

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

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

并将 CR/LF 算作两个字符使用正则表达式

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来防止击键事件。