字数 textarea jquery 脚本初始文本计数 onload 问题答案

【问题标题】：word count textarea jquery script initial text count onload issue字数 textarea jquery 脚本初始文本计数 onload 问题
【发布时间】：2015-08-18 12:55:26
【问题描述】：

我正在使用一个字数统计 textarea jquery 脚本，我正在尝试研究如何将字数统计更新为例如2 从预设文本区“本例”开始。

（目前显示为0）

我可以设置焦点并移动光标，但我最初不知道如何更新它，有什么想法吗？

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 包含：-

(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 包含：-

(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)

【问题讨论】：

好的，但是现在没有更新。
似乎正确地将其设置为初始值。

标签： javascript jquery html count words

【解决方案1】：

这是我在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

【讨论】：

@user3725395 如果它解决了您的问题，请务必将此标记为答案（投票按钮下方的勾号）。谢谢:)

【解决方案2】：

您可以在初始化期间触发keyup 事件以触发更新：

<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>

【讨论】：

【解决方案3】：

//显示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";
});

【讨论】：