dynamically count textarea symbols in a simple input

Question

Good day everyone I have a simple textarea on a page,and I need to dynamically count number of symbols, show how much is left under the form,and limit number of characters should be 350. Thanks in advance. What i exactly need is to display how many symbols are left to type

function limit(element)
{
    var max_chars = 350;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
}

 <textarea onkeydown="limit(this);" onkeyup="limit(this);"></textarea>

And what is the question? What have you tried doing so far and where are the problems with it? So far you are asking us to write code for you — UnholySheep, Feb 13 '17 at 09:07
http://stackoverflow.com/questions/9841363/how-to-restrict-number-of-characters-that-can-be-entered-in-html5-number-input-f — Alexis, Feb 13 '17 at 09:07

Eskaaa · Answer 1 · 2017-02-13T09:32:36.750

Here is a simple solution, just display the leftCharacters in a placeholder;

<script>
    $(function() {
      var $textarea = $('textarea');
      var $input = $('input[name="spaces"]');
      var maxLength = $textarea.attr('maxlength');
      $input.val(maxLength);

      $textarea.on('input', function() {
        var currentLength = $textarea.val().length;
        var leftCharacters = (maxLength - currentLength);
        $input.val(leftCharacters);
        });
    });

</script>

<textarea name=test" maxlength="350"></textarea>
<input name="spaces" disabled />

score 0 · Answer 2 · answered Feb 13 '17 at 09:18

var max_chars = 5;
var charsLeftDisplay = document.getElementById("charsLeft");

function limit(element) {
  if (element.value.length > max_chars) {
    element.value = element.value.slice(0, -1);
    return false;
  }
  charsLeftDisplay.innerHTML = (max_chars - element.value.length) + " characters left...";
}

<textarea onkeyup="limit(this)"></textarea>
<p id="charsLeft"></p>

score 0 · Answer 3 · answered Feb 13 '17 at 09:27

I think the best way to do this would be to use JQuery

here's the html

<textarea id="textareaID" rows="4" cols="50" maxlength="50"></textarea>

<p id="numberOfChars"><strong>Character typed:</strong> 0</p>
<p><strong>Max Character:</strong> 50</p>

and here's the jquery code

$('#textareaID').bind('input propertychange', function() {
      if(this.value.length){
        $("#numberOfChars").html("<strong>Character typed:</strong> "+this.value.length);
      }
});

and here's a working fiddle as well https://jsfiddle.net/Visrozar/zbw7j64j/

Alcides Soares FIlho · Answer 4 · 2017-08-16T00:03:12.500

This solution really works very well:

1 - Insert a div with id="textarea_count" for example in the place you want to show remaining characters, in your HTML file, near your textarea element (above or under):

 <div class="form-group">
        <label asp-for="DescCompetencia" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <textarea asp-for="DescCompetencia" class="form-control" rows="5"></textarea>
            <span asp-validation-for="DescCompetencia" class="text-danger"></span>
            <div id="textarea_count"></div>
        </div>
    </div>

2 - Insert in your javascript file or after /html element in the page you are editing the textarea element:

$(document).ready(function () {
var text_max =  500; //change by your max desired characters
var text_min = 7; //change to your min desired characters (or to zero, if field can be blank))
if ($('#DescCompetencia').length) {
    var texto_disponivel = text_max - $('#DescCompetencia').val().length;
}
$('#textarea_count').html(texto_disponivel + ' caracteres disponíveis para digitar');
$('#DescCompetencia').keyup(function () {
    var text_length = $('#DescCompetencia').val().length;
    var text_remaining = text_max - text_length;
    if (text_length <= text_min) { 
        $('#textarea_count').html(text_remaining + ' caracteres remanescentes. Digite ' + text_min + ' ou mais caracteres.');
    }
    else {
        $('#textarea_count').html(text_remaining + ' caracteres remanescentes');
    }
});    });

Must have Jquery already loaded before calling the above function.

dynamically count textarea symbols in a simple input

4 Answers4