时间戳

首页 > 解决方案 > 字符限制以“负”数字显示剩余字符

javascript - 字符限制以“负”数字显示剩余字符

问题描述

我使用的是 tinyMCE 版本 3，我使用的是富文本编辑器，它在输入时计算剩余的字符。由于 maxLength 属性不适用于 tinyMCE3。我已经以这种方式进行了硬编码，但它也计算了空白字符

< script type = "text/javascript" >

  tinyMCE.init({
    mode: "textareas",
    theme: "advanced",
    editor_selector: "mceEditor",
    theme_advanced_statusbar_location: "bottom",
    theme_advanced_path: false,
    statusbar: true,
    setup: function(editor) {
      editor.onKeyUp.add(function(c) {
        //    var maxCount = document.getElementById(editor.id).maxLength;
        var maxCount = 10;
        console.log(editor.id);
        var txt = $(editor.getBody()).text();
        var txtLen = txt.length;
        var value = maxCount - (txtLen);
        $(tinyMCE.activeEditor.getContainer()).find("#" + editor.id + "_path_row").html("Remaining chars: " + (value));

        if (txtLen > maxCount) {
          editor.setContent("");
          tinyMCE.activeEditor.selection.setContent(txt.substring(0, maxCount));
          tinyMCE.activeEditor.focus();
        }
      });
    }

  }); <
/script>
<textarea id="1" class="mceEditor" cols="100" rows="7" wrap="" maxlength="10">test sample</textarea>

负数计算

以负数计数并将内容设置为空白

当我在中间输入 2 个字符时，它会删除最后两个字符，有什么方法可以在输入到达计数器“0”后停止输入。

标签： javascriptjqueryhtmlstringtinymce-3

解决方案

我不确定我是否完全理解您的问题，因为这里发生了很多事情。

将剩余字符显示为负数

我看到，使用您的代码，如果您输入 11 个字符，第 11 个字符将被删除，但剩余的字符显示“-1”而不是“0”。这是你的抱怨吗？发生这种情况的原因是因为您将编辑器的文本内容修剪到 maxCount，但您的剩余字符值是在修剪发生之前计算的，因此它仍然具有 maxCount 的值 - 未修剪长度。您可以通过多种方式轻松解决此问题，包括更改：

$(tinyMCE.activeEditor.getContainer()).find("#" + editor.id + "_path_row").html("Remaining chars: " + (value));

对此：

$(tinyMCE.activeEditor.getContainer()).find("#" + editor.id + "_path_row").html("Remaining chars: " + (value > 0 ? value : 0));

计算空白字符

如果您不希望计数中包含任何空白字符，请使用以下命令：

var txtLen = txt.replace(/\s/g,"").length;

如果您只想修剪末端的空白字符，请使用以下命令：

var txtLen = txt.trim().length;

推荐阅读