Question

我在textarea上使用nicedit以允许丰富的编辑器功能。我还想在textarea的末尾添加字符计数器，以便让用户在textarea中键入特定的字符数。我使用上面的代码，编辑器工作得很好。

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

由于

Answer 1

那么，你只需要知道textarea中的字符数量吗？

您可以使用textarea的value的length属性获取： textarea.value.length

以下是一个例子：

<textarea onkeyup="console.log(this.value.length)"></textarea>

这是一个字数统计检查。它不是万无一失的，但它会让你开始：

<textarea onkeyup="updateCounter(this)" onpropertychange="this.onkeyup()"></textarea>
<div id="limit"></div>

<script>

    var limit = document.getElementById("limit");

    function updateCounter(textarea) {

        var len = textarea.value.length;


        var max = 10;


        if(max - len < 0) {
            textarea.value = textarea.value.substring(0, max);
        } else {
            limit.innerHTML = max - len;
        }



    }
</script>

另外，请记住Stack Overflow是一个程序员帮助站点。我们会帮助解决编码问题，但我们不只是为人们编写程序（有很多网站可供选择;）。

Answer 2

如果你想要一个NicEdit textarea的动态字符计数器，那么你应该意识到一个NicEditor（以及大多数/所有WYSIWYG HTML编辑器）是一个可编辑的div，并且div的内容仅在之后被添加到相关的textarea中。 div失去了焦点。我发现只是试图动态计算textarea中的字符不起作用。也许我做错了什么。无论如何，我确实得到了一个动态的NicEdit字符计数器，如下所示：

设置HTML页面以使用NicEdit：

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

添加对包含计数器功能的JavaScript文件的引用：

<script type="text/javascript" language="JavaScript" src="nicCount.js"></script>

nicCount.js的内容是：

function nicCount(editor, ctrId, maxChars)  {
   // Count characters remaining in the given nicEditor (editor), and update the given counter (ctrId)
   counterObj = document.getElementById(ctrId);
   if(counterObj) {
      var content = editor.getContent();
      if(maxChars - content.length <= 0) {
          // if there are no characters remaining, display the negative count in red
         counterObj.innerHTML = "<font color='red'>"+ (maxChars - content.length) + "</font>"; 
      }
      else { // characters remaining
        counterObj.innerHTML = maxChars - content.length; 
      }
   }
}

定义textarea，确保其具有唯一ID：

<textarea name='mytextarea1' id='mytextarea1行= 10 cols = 100＆gt;`
根据您希望计数器显示的位置，将以下HTML代码放在textarea代码的上方或下方。实际的计数器值也给出了唯一的ID：

<p><b id='mycounter1'>1000</b> characters remaining</p>

在textarea和counter行之后，我添加了以下HTML代码块，以动态调用我的：

<script type="text/javascript">
//<[!CDATA[
bkLib.onDomLoaded (function() {
  var editor = nicEditors.findEditor('mytextarea1');
  editor.getElm().onkeyup = function() { nicCount(editor, 'mycounter1', 1000); }
})
//]]
</script>

请注意，我的char计数器实际上是一个字符剩余计数器（具有1000个字符限制），因为我有兴趣在textarea上强制执行字符限制（并让用户知道他们仍然可以添加多少个字符），但它可以很容易地调整为一个真正的字符使用计数器。

我在FireFox 26和IE9中进行了测试。

Answer 3

也遇到这个问题，经过一番搜索，我进入了这个解决方案：

$('body').on('keyup keydown focus','.nicEdit-selected', function (event) { $('#chars_text').text($(this).html().replace(/<\/?[^>]+(>|$)/g, "").length)});

chars_text id可以是例如。 SPAN元素放置在nicedit附近的任何位置其他解决方案基于.text（）。length，nicEdit使用html（），这带来了另一个问题 - 字符数也包括由nicEdit插入的TAGS，所以你必须先剥离它们。

希望得到这个帮助。

nicedit WYSIWYH编辑器+字符数

3 个答案: