Cómo reflejar en tiempo real el recuento de palabras de textarea. La siguiente secuencia de comandos funciona muy bien para contar caracteres (incluso los idiomas distintos del inglés están bien). Pero el problema es que no funcionará si el texto se genera desde el propio script. Cambié el evento de "keyup" a "cambiar" a "entrada", pero ninguno de ellos funcionará. solo funcionan cuando se escribe en el área de texto.
¿Alguien me da algunas ideas?
var outputCombo = document.getElementById("outputCombo"); var textInfo = document.getElementById("text-info "); if (document.querySelector('input[name="radio_btn"]')) { document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => { elem.addEventListener("change", function(event) { outputCombo.value = "you pressed " + elem.value; }); }); } outputCombo.addEventListener("input", function() { var maxLength = 280; var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length; var charRemain = (maxLength - strLength); if (charRemain < 0) { textInfo.innerHTML = '<span style="color: red; ">surpassed ' + charRemain + ' chracters</span>'; outputCombo.style.backgroundColor = 'red'; } else { textInfo.innerHTML = 'remaining: ' + charRemain; outputCombo.style.backgroundColor = 'white'; } }); <ul class="ul"> <li class=""> <input type="radio" name="radio_btn" value="Instagram"> <label>Instagram</label> </li> <li class=""> <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label> </li> </ul> <textarea class="form-control" id="outputCombo"></textarea> <span id="text-info ">word count: </span>Agrego su secuencia de comandos para contar en una función y luego la uso cuando cambia el valor del área de texto como:
var outputCombo = document.getElementById("outputCombo"); var textInfo = document.getElementById("text-info "); if (document.querySelector('input[name="radio_btn"]')) { document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => { elem.addEventListener("change", function(event) { outputCombo.value = "you pressed " + elem.value; countTextArea(); }); }); } outputCombo.addEventListener("input", function() { countTextArea(); }); function countTextArea() { var maxLength = 280; var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length; var charRemain = (maxLength - strLength); if (charRemain < 0) { textInfo.innerHTML = '<span style="color: red; ">surpassed ' + charRemain + ' chracters</span>'; outputCombo.style.backgroundColor = 'red'; } else { textInfo.innerHTML = 'remaining: ' + charRemain; outputCombo.style.backgroundColor = 'white'; } } <ul class="ul"> <li class=""> <input type="radio" name="radio_btn" value="Instagram"> <label>Instagram</label> </li> <li class=""> <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label> </li> </ul> <textarea class="form-control" id="outputCombo"></textarea> <span id="text-info ">word count: </span>Puede activar manualmente un evento de entrada con outputCombo.dispatchEvent(new Event("input"))
Aquí está el código completo:
<ul class="ul"> <li class=""> <input type="radio" name="radio_btn" value="Instagram"> <label>Instagram</label> </li> <li class=""> <input type="radio" name="radio_btn" value="Twitter"><label>Twitter</label> </li> </ul> <textarea class="form-control" id="outputCombo"></textarea> <span id="text-info ">word count: </span> <script type="text/javascript "> var outputCombo = document.getElementById("outputCombo"); var textInfo = document.getElementById("text-info "); if (document.querySelector('input[name="radio_btn"]')) { document.querySelectorAll('input[name="radio_btn"]').forEach((elem, i) => { elem.addEventListener("change", function(event) { outputCombo.value = "you pressed " + elem.value; // Here is the triggered event outputCombo.dispatchEvent(new Event("input")) }); }); } outputCombo.addEventListener("input", function() { var maxLength = 280; var strLength = outputCombo.value.replace(/[^\x00-\xff]/g, "01 ").length; var charRemain = (maxLength - strLength); if (charRemain < 0) { textInfo.innerHTML = '<span style="color: red; ">surpassed ' + charRemain + ' chracters</span>'; outputCombo.style.backgroundColor = 'red'; } else { textInfo.innerHTML = 'remaining: ' + charRemain; outputCombo.style.backgroundColor = 'white'; } }); </script>Dispare el evento manualmente una vez que establezca el valor en textarea
outputCombo.value = "you pressed " + elem.value; outputCombo.dispatchEvent(new Event('input'));