jQuery character count

Question

I am working on a character count based on this post.
I would like to call the function on window load but seem to be having issues, otherwise everything works.
Can anyone lend a hand on getting the count on load please.
heres my fiddle

function countChar(val){
    var len = val.value.length;

    if (len >= 500) {
            val.value = val.value.substring(0, 500);
            $('#stat span').text(0);
    }else {
            $('#stat span').text(500 - len);
    }
}

$(function(){
    var inputT = $('#descTextArea').val();
    //countChar(inputT);//this is breaking the code

    $('#descTextArea').keyup(function(){
        countChar(this);
    });

});

Why do you need the line that you know breaks the code? Seems to work just fine without it. — j08691, Oct 05 '12 at 17:19
@j08691 i am trying to get the count as soon as the page loads, in other words if the `textarea` had preloaded text then would like to output the count — t q, Oct 05 '12 at 17:21

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Try this instead

function countChar(val) {
    var len = val.value.length;
    if (len >= 500) {
        val.value = val.value.substring(0, 500);
        $('#stat span').text(0);
    } else {
        $('#stat span').text(500 - len);
    }
}
countChar($('#descTextArea').get(0));
$('#descTextArea').keyup(function() {
    countChar(this);
});

jsFiddle example

In your code you were passing a string (the value) into your function which is trying to get the length of an element. Instead, by calling countChar($('#descTextArea').get(0)); you're just passing the element and allowing the function to find the length of the input as you intended.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 05 '12 at 17:23

j08691

204,283
31
260
272

1 upvote after 16 seconds. I smell a throwaway voter account. – AlienWebguy Oct 05 '12 at 17:24
1

@AlienWebguy - I wish. I was kinda surprised myself. – j08691 Oct 05 '12 at 17:25
2

I upvoted it. This is the correct answer as it passes the html element into `countChar` instead of a string. Guess I navigated to the question right after the answer was posted. – Chris Oct 05 '12 at 17:25
I wish I could read JavaScript as fast as you @Rfvgyhn. I'm impressed. – AlienWebguy Oct 05 '12 at 17:27
@j08691 thank you, can you explain this part a little please? `.get(0)` – t q Oct 05 '12 at 17:27
2

@AlienWebguy This was just one of those cases where the bug jumped out at me. If only I could debug that easily all the time. :) – Chris Oct 05 '12 at 17:34

Justin Levene · Answer 2 · 2015-05-14T09:37:27.113

Here is a quick and simple jQuery plugin I wrote. All you need to do is $("#element_id").jqCounter(); to give an input or textarea a character counter. It responds to paste, changes and everything else I could think of.

You must set the maxlength attribute for it to work, ie. <input maxlength=45 /> or <textarea maxlength=45></textarea>

<script>
(function($) {
    $.fn.extend({
        jqCounter : function(givenOptions) {
            return this.each(function() {
                var $this = $(this),
                    options = $.extend({
                        divider: "/"    // The diveder character between the count and max
                    }, givenOptions);
                // 0 chars or max count not set or already setup
                if($this.attr("maxlength") <= 0 || $this.hasClass("jqCounter")) return;

                // Add the counter text after the element
                var span= $("<span style=\"font-size:10px;\">"+$this.val().length+options.divider+$this.attr("maxlength")+"</span>")
                .insertAfter($this);

                // Add a class
                $this.addClass("jqCounter")
                // React to keypresses, changes, paste, etc. and change the counter
                .on('focus blur propertychange change input paste keydown keyup keypress', function(){
                    setTimeout(function(){
                        var maxChars = $this.attr("maxlength"),
                            txtLength = $this.val().length;
                        span.text( txtLength + options.divider + maxChars );
                        },
                    1);
                });
            });
        }
    });
})(jQuery);

$(document).ready(function()
{
  // All text areas will have a content counter
  $("textarea").jqCounter();
});
</script>

score 0 · Answer 3 · answered Oct 05 '12 at 17:22

0

Use $(document).ready() to bind your event handlers when the window loads, like so:

$(document).ready(function() {
    $('#descTextArea').keyup(function(){
      countChar(this);
 });
});

answered Oct 05 '12 at 17:22

droxey

74
4

this is for grabbing the text on keystroke, im talking about when the page reloads – t q Oct 05 '12 at 17:23
it's irrelevant for jsfiddle, it automatically wraps your code with $(window).load – Michal Klouda Oct 05 '12 at 17:24
1

Thanks @Michal Klouda, I had no idea! – droxey Oct 05 '12 at 17:26

jQuery character count

3 Answers3

Linked