限制文本区域中的字符，如何考虑回车？ [复制]答案

【问题标题】：Limiting characters in a textarea, how to account for carriage returns? [duplicate]限制文本区域中的字符，如何考虑回车？ [复制]
【发布时间】：2015-05-07 18:20:31
【问题描述】：

我想限制用户在文本区域中输入 10 个字符，并在用户接近限制时通知用户。我通过设置文本区域的maxLength 属性来做到这一点，并使用一些javascript 在输入字符时更新标签。

但我的 javascript 没有正确计算新行。或者至少它不会以与textarea 元素相同的方式计算它们。如果我输入下面的示例输入，我的 javascript 将计算出正在使用 6 个字符并输出剩余 4 个字符，但 textarea 将不再允许输入。

示例输入：输入'D'，按回车键4次，输入'D'：

D



D

（我实际上允许超过 10 个，但较小的数字更能说明问题）

function limitText() {
  var textarea = document.getElementById('textarea');
  var char_label = document.getElementById('charcount_text');

  var count = textarea.value.length;
  var max = textarea.maxLength;
  console.log(count + " " + max);
  var remaining = max - count;
  if (remaining <= 0) {
    char_label.innerHTML = '10 character limit reached.';
  } else if (remaining <= 5) {
    char_label.innerHTML = '10 character limit, ' + remaining + ' remaining.';
  } else {
    char_label.innerHTML = '';
  }
}

textarea {
  width:200px;
  height:80px;
}

<textarea id="textarea" onKeyDown="limitText()" onKeyUp="limitText()" maxlength="10"></textarea>
<span class="charcount_text" name="charcount_text" id="charcount_text"></span>

【问题讨论】：

标签： javascript html

【解决方案1】：

好的，所以问题是评论中所述的换行符。

代码不是很漂亮，但我已经把它显示在你的计数和实际计数的差异上。从这一点开始，您需要做的是在计算余数时考虑该差异。如果下面的评论不清楚，我会尽力提供帮助。

这是一个计算换行符的小提琴。 Fiddle

代码：

<textarea id="textarea" onkeyup="limitText()" maxlength="10"></textarea>
<span class="charcount_text" name="charcount_text" id="charcount_text"> </span>
</br>
<span class="showall" name="showall" id="showall"></span>  
  <script type='text/javascript'>
     function limitText() {

  var textarea= document.getElementById('textarea');
  var char_label = document.getElementById('charcount_text');

  var textinside = document.getElementById('showall');

  var count = textarea.value.length;
  var max = textarea.maxLength;
  console.log(count + " " + max);
  var remaining = max - count;
  if(remaining <= 0) {
    char_label.innerHTML = '10 character limit reached.' ;
  } else if(remaining <= 5) {
    char_label.innerHTML = '10 character limit, ' + remaining  + ' remaining.';
  } else {
   char_label.innerHTML = count;        
  }
    var enteredText = textarea.value;
    numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
    var characterCount = enteredText.length + numberOfLineBreaks;
    textinside.innerHTML = characterCount;
}
</script>

【讨论】：