Count and limit characters in textarea with dynamic value

Question

I have a textarea with select list to put content into my textarea. I know how to count the dynamic value from the select list, but if I write some text after putting value on the textarea, the counter doesn't work. Any idea ?

Html :

<div id="selectmodelediv">
    <select>
        <option value=""></option>
        <option value="1111">test1</option>
        <option value="222">test2</option>
    </select>
    <br/>
    <textarea id="targetText" name="targetText" class="champ_tel_txtarea" rows="6" cols="50"></textarea>
    <div id="compteur" class="compteur"></div>
</div>

Jquery :

$('select').change(function () {
    $('#targetText').val($('#selectmodelediv select').val()) //
    $('#compteur').text('255 characters left');
    var max = 255;
    var len = $(this).val().length;
    if (len >= max) {
        $('#compteur').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
});

score 1 · Accepted Answer · edited May 23 '17 at 12:12

Hope this helps.

Reference Count characters in textarea

HTML:

<div id="selectmodelediv">
    <select>
        <option value=""></option>
        <option value="1111">test1</option>
        <option value="222">test2</option>
    </select>
    <br/>
    <textarea id="targetText" name="targetText" class="champ_tel_txtarea" rows="6" cols="50" onkeyup="countChar(this)"></textarea>
    <div id="compteur" class="compteur"></div>
</div>

Javascript:

var max = 255;

$(document).ready(function(){
$('select').change(function () {
    $('#targetText').val($('#selectmodelediv select').val()) //
    $('#compteur').text('255 characters left');

    var len = $(this).val().length;
    if (len >= max) {
        $('#compteur').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
});
})
function countChar(val) {
    var len = val.value.length;
    if (len >= max) {
        $('#compteur').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
}

Drew Gaynor · Answer 2 · 2013-11-25T14:19:24.280

The issue is that you are not binding to the change event of the textarea, only the select. See here for a working example: http://jsfiddle.net/h2ejR/.

JavaScript

function UpdateCharactersLeft(element) {
    var max = 255;
    var len = $(element).val().length;

    if (len >= max) {
        $('#compteur').text(' you have reached the limit');
    } 
    else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
}

$('select').change(function () {
    $('#targetText').val($('#selectmodelediv select').val());
    UpdateCharactersLeft(this);
});

$('#targetText').on('keyup', function() {
    UpdateCharactersLeft(this);
});

HTML

<div id="selectmodelediv">
    <select>
        <option value=""></option>
        <option value="1111">test1</option>
        <option value="222">test2</option>
    </select>
    <br/>
    <textarea id="targetText" name="targetText" class="champ_tel_txtarea" rows="6" cols="50"></textarea>
    <div id="compteur" class="compteur"></div>
</div>

score 0 · Answer 3 · answered Nov 25 '13 at 14:00

I think you miss one key event. Try this:



  $('select').change(function () {
      vv = $(this).val();
      $('#targetText').val(function(i, old){return old+vv}).trigger('keyup');
  })
  $('#targetText').keyup(function(){
      $('#compteur').text('255 characters left');
      var max = 255;
      var len = $(this).val().length;
    if (len >= max) {
       $('#compteur').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
  });

score 0 · Answer 4 · answered May 30 '17 at 10:54

You need to use all the following events:

.change
.keydown
.keypress
.keyup
.blur
.focus

So put your function in a variable li ke so:

var counter = function() {
    $('#targetText').val($('#selectmodelediv select').val()) //
    $('#compteur').text('255 characters left');
    var max = 255;
    var len = $(this).val().length;
    if (len >= max) {
        $('#compteur').text(' you have reached the limit');
    } else {
        var ch = max - len;
        $('#compteur').text(ch + ' characters left');
    }
});

$('select').change(counter);
$('select').keydown(counter);
$('select').keypress(counter);
$('select').keyup(counter);
$('select').blur(counter);
$('select').focus(counter);

Count and limit characters in textarea with dynamic value

4 Answers4

JavaScript

HTML