Question

我想限制用户在文本区域输入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>

Answer 1

好的，问题就在于评论中所述的换行符。

代码并不漂亮，但我已经知道它会显示你的计数和实际数量的差异。从这一点开始，您需要做的是计算余数时的差异。如果下面没有明确的评论，我会尽力提供帮助。

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

CODE：

<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>

限制textarea中的字符，如何计算回车？

1 个答案: