CODEWITHSUNDEEP
javascriptjqueryhtmlcountwords
user3725395
user3725395

Reputation: 185

word count textarea jquery script initial text count onload issue

I'm using a word count textarea jquery script and I'm trying to work out how to update the word count onload to e.g. 2 from the preset text area "this example" to start with.

(it currently shows 0)

I can set the focus on it and move the cursor but I don't know how to update it initially, any ideas?

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.textareaCounter.c.js"></script> 

<textarea id="txtarea" name="text" rows="7" cols="120">this example</textarea>
<script type="text/javascript">
    $("textarea").textareaCounter();
    document.getElementById('txtarea').focus();
    var val = document.getElementById('txtarea').value; //store the value of the element
    document.getElementById('txtarea').value = ''; //clear the value of the element
    document.getElementById('txtarea').value = val; //set that value back. so cursor is at end.
</script>

jquery.min.js contains:-

(function(a){a.fn.textareaCounter=function(b){var c={limit:10};var b=a.extend(c,b);return this.each(function(){var c,d,e,f;c=a(this);c.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+b.limit+" words</span>");c.keyup(function(){d=c.val();if(d===""){e=0}else{e=a.trim(d).split(" ").length}if(e>b.limit){a("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');f=a.trim(d).split(" ",b.limit);f=f.join(" ");a(this).val(f)}else{a("#counter-text").html(b.limit-e+" words left")}})})}})(jQuery)

jQuery.textareaCounter.c.js contains:-

(function(a) {
    a.fn.textareaCounter = function(b) {
        var c = {
            limit: 10
        };
        var b = a.extend(c, b);
        return this.each(function() {
            var c, d, e, f;
            c = a(this);
            c.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">' + "0 words</span>");
            c.keyup(function() {
                d = c.val();
                if (d === "") {
                    e = 0
                } else {
                    e = d.replace(/^[\s,.;]+/, "").replace(/[\s,.;]+$/, "").split(/[\s,.;]+/).length;
                }
                if (e > b.limit) {
                    // a("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    // f=a.trim(d).split(" ",b.limit);
                    // f=f.join(" ");
                    // a(this).val(f)
                    a("#counter-text").html(e + " words ")
                    document.myform.numwords.value = e;
                } else {
                    a("#counter-text").html(e + " words ")
                    document.myform.numwords.value = e;
                }
            });
        });
    }
})
(jQuery)

Upvotes: 0

Views: 659

Answers (3)

ashwini
ashwini

Reputation: 375

//Function to show maxlength of Textarea

document.getElementById("textArea").addEventListener("keyup",function(){

    var textAreaValue = document.getElementById("textArea").value;
    var show = (250 - (textAreaValue.length));
    document.getElementById('count').innerHTML = show + " characters remaining";
});

Upvotes: 0

spenibus
spenibus

Reputation: 4409

You can fire a keyup event during initialization to trigger the update:

<script type="text/javascript">
    $("textarea").textareaCounter();
    document.getElementById('txtarea').focus();
    var val = document.getElementById('txtarea').value; //store the value of the element
    document.getElementById('txtarea').value = ''; //clear the value of the element
    document.getElementById('txtarea').value = val; //set that value back. so cursor is at end.

    // init word count
    $("textarea")[0].dispatchEvent(new Event('keyup'));
</script>

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is what I changed in jQuery.textareaCounter.c.js:

var initCount = c.text().split(" ").length;
if(initCount < 2){initCount=0;}
c.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">' + initCount +" words</span>");

Here is the JSFiddle demo

Upvotes: 1

Related Questions