javascript字符计数器上的目标类

Targeting class on a javascript character counter

本文关键字：目标 字符 计数器 javascript      更新时间：2023-09-26

我们有一个字符计数器使用javascript和一个富文本编辑器在我们的网站上的表单。计数在标准文本区域上工作，但由于富文本编辑器，文本区域显示为none，富文本编辑器成为一个分配了类的div。我们如何修改下面的代码来针对新的div类呢?

这是目前为止的代码。

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

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

与上面gasshaw的回答非常相似。

改变:

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

: 

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

那么它将适用于文本区域和div

相关文章：