在文本区域中计数 letters/numbers 并显示它（没有 jQuery！）

Question

我正在与 Bootstrap 和 CKEditor5 Classic 合作。

我想在我的 textarea 中有一个带有 ONKEYUP 的计数器，每次 div id countThis..

中的键上升时应该显示该计数器

我只需要纯粹的javascript我试过跟随但它不起作用..

我怎样才能让它发挥作用？谢谢！

（没有 jQuery 我需要它！）

代码

<div class="row">
  <div class="form-group col-10">
    <label class="form-label" for="txt">Ddscription</label>

    <textarea id="txt" class="form-control" onkeyup="CheckInput()"></textarea>

  </div>
  <div class="col-2 mt-4" id="countThis"></div>
</div>

ClassicEditor
  .create(document.querySelector('#txt'))
  .catch(error => {
    console.error(error);
  });

function CheckInput() {
  var value = document.getElementById("txt").value.length;
  console.log(value); // HERE COMES NOTHING
  document.getElementById("countThis").innerHTML = value;
}

Answer 1

我建议使用 CKEditor API 而不是 keyup 属性来捕获事件，这样：

ClassicEditor
    .create(document.querySelector('#txt'))
    .then(editor => {
        /// Register change listener
        editor.model.document.on( 'change:data', () => {  /// <--- Changes listener

            /* ALL THE LOGIC IS DOWN HERE */

            document.getElementById("countThis").innerHTML = 
                editor    /// <--- Editor reference
                    .getData()    /// <--- Editor content
                    .replace(/<[^>]*>/g, '')    /// <--- Convert HTML to plain text
                    .replace('&nbsp;', ' ')    /// <--- Remove &nbsp; for spaces
                    .length;    /// <--- Get plain text length
        });
    })
  .catch(error => {
    console.error(error);
  });

<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div class="row">
  <div class="form-group col-10">
    <label class="form-label" for="txt">Ddscription</label>

    <textarea id="txt" class="form-control"></textarea>

  </div>
  <div class="col-2 mt-4" id="countThis"></div>
</div>

在文本区域中计数 letters/numbers 并显示它（没有 jQuery！）

count letters/numbers in textarea and show it (without jQuery!)

javascript

bootstrap-4