Question

我正在使用单词计数textarea jquery脚本，而我正在尝试解决如何将单词count onload更新为例如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)

Answer 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

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

Answer 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";
});

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

3 个答案: