jquery javascript 如何在 textarea 后最近的 div 中顯示一些 html

Question

我有 3 個文本區域和 3 個 div，每個區域下應該顯示一些 html。

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>

當我輸入一些文本時，在我輸入的文本區域下方帶有 class character_count的 div 中，是否應顯示字符。 我沒有成功：

這是我的js：

tinymce.init({
        selector: '.tinymce',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                
                $(this).closest(".character_count").text("Characters: " + count); // find the closest div with class .character_count and show the html  
                
            });
        }
    });
   
    function CountCharacters() {
        var body = tinymce.activeEditor.getBody();
        var content = tinymce.trim(body.innerText || body.textContent);
        return content.length;
    };

小提琴測試： https://jsfiddle.net/4vron96z/3/

順便說一句： $(".character_count").text("Characters: " + count); 確實有效，但是 html 顯示在所有 3 個 div 中...

Answer 1

tinymce.init({
    selector: '.tinymce',
    width: 400,
    setup: function (ed) {
        ed.on('keyup', function (e) {
            var count = CountCharacters();
            $(this.targetElm).closest('.wrapper')
                .find('.character_count').text("Characters: " + count);
        });
    }
});
   
function CountCharacters() {
    var body = tinymce.activeEditor.getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

<span class="wrapper">
  <textarea class="tinymce" rows="2" cols="20"></textarea><br />
  <div class="character_count"></div>
</span>

好的，所以 StackOverflow 似乎不喜歡 tinymce 庫所以我把它從可運行文件中拉出來，但這是我在你的 jsfiddle 中工作的版本。

由於setup回調中的this是一些 tinymce object，因此它不適用於 jQuery。 但是， this.targetElm似乎是 tinymce 為其初始化並正在為其處理事件的元素。

因此，使用它，我們可能會使用$(this.targetElm).next('div')來獲取您的元素，但是，您的下一個元素不是 div。 這是您在其中的<br /> 。 這意味着您可以執行next().next('div')來獲得它，但這既丑陋又脆弱，所以！

html 的修改版本現在在每個 textarea 和 div 配對周圍都有一個包裝器。 將標記更改為，然后我們可以使用closest('.wrapper').find('.character_count')邏輯向上導航到 textarea 和 div 的父元素，然后找到嵌套的 div，無論它位於何處。

Answer 2

TinyMCE 有一個wordcount插件，可以告訴你這一點，而無需計算值。 例如，您可以執行以下操作：

tinymce.activeEditor.plugins.wordcount.body.getCharacterCount() 

...或者...

tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces() 

這是一個運行示例：

http://fiddle.tinymce.com/Gmhaab