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

Question

I'm working with Bootstrap and the CKEditor5 Classic.

I want to have a counter with ONKEYUP in my textarea which should be shown each time the key goes up in div id countThis..

I only need pure javascript I've tried following but it doesnt work..

How can I make it work? thank you!

(I need it without jQuery!)

CODE


  
    Ddscription

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;
}

user_2473909 · Answer

I suggest to capture the event using CKEditor API instead of the keyup attribute, in this way:

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(' ', ' ')    /// <--- Remove   for spaces
                    .length;    /// <--- Get plain text length
        });
    })
  .catch(error => {
    console.error(error);
  });



  
    Ddscription

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

1 Answers