Question

我们的网站上的表格上有一个使用javascript和富文本编辑器的字符计数器。计数适用于标准textareas，但由于富文本编辑器，textarea显示为none，富文本编辑器变为div，并指定了类。我们如何更改下面的代码以定位新的div类：.nicEdit-main

到目前为止，这是我们的代码。

$(document).ready(function(){
    var limitnum = 200; // set your int limit for max number of characters

    function limiting(obj, limit) {
        var cnt = $("#counter > span");
        var txt = $(obj).val(); 
        var len = txt.length;

        // check if the current length is over the limit
        if(len > limit){
            $(obj).val(txt.substr(0,limit));
            $(cnt).html(len-1);
        }
        else { 
            $(cnt).html(len);
        }

        // check if user has less than 20 chars left
        if(limit-len <= 20) {
            $(cnt).addClass("warning");
        }
    }

    $('.nicEdit-main').keyup(function(){
        limiting($(this), limitnum);
    });
});

以上内容应该更新来自：

 <p id="counter"><span>0</span> characters</p>

并从中获取计数：

<div class="nicEdit-main" contenteditable="true" style="width: 846px; margin: 4px; min-height: 131px; overflow: hidden;">Our typed text here...</div>

Answer 1

您需要将var txt = $(obj).val();更改为var txt = $(obj).text();，因为div元素（obj）没有像textarea（或任何其他输入元素）这样的值属性。

Answer 2

非常类似于上面的Gashaw的答案。

变化：

var txt = $(obj).val();

为：

var txt = $(obj).text() + $(obj).val();

然后它适用于textareas和你的div

在javascript字符计数器上定位类

2 个答案: