Estoy trabajando con Bootstrap y CKEditor5 Classic .
Quiero tener un contador con ONKEYUP en mi área de textarea que debería mostrarse cada vez que la clave sube en div id countThis ..
Solo necesito javascript puro. He intentado seguir pero no funciona.
¿Cómo puedo hacer que funcione? ¡gracias!
(¡Lo necesito sin jQuery!)
CÓDIGO
<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; }Sugiero capturar el evento usando la API de CKEditor en lugar del atributo keyup, de esta manera:
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); }); <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>