2

I would like to limit the user to entering 10 characters into a text area, and to notify the user when they approach the limit. I'm doing this by setting the maxLength attribute of the text area, and using some javascript to update a label as characters are entered.

But my javascript doesn't properly count new lines. Or at least it doesn't count them in the same manner as the textarea element. If I enter the below sample input, my javascript will compute that 6 characters are being used and output that 4 characters are remaining, but the textarea will not allow any more input.

Sample input: enter 'D', press return 4 times, enter 'D':

D



D

(I'm actually allowing more than 10, but a low number better exemplifies the issues)

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>
showdev
  • 28,454
  • 37
  • 55
  • 73
ab11
  • 19,770
  • 42
  • 120
  • 207

1 Answers1

0

Okay, So the issue is line breaks as stated in the comment.

The code is not pretty, but I have gotten it to the point where it will show the difference in your count and the actual count. What you will need to do from this point is account for that difference when calculating the remainder. If this isn't clear comment below and I will try to help.

Here is a fiddle with counting line breaks. 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>
Kighted
  • 64
  • 4