Escribí un script simple para contar palabras mientras escribía en el formulario. Mi pregunta es por qué al cambiar el valor del campo word_count al escribir; El EventListener de word_count no se dispara
document.getElementById('subject').addEventListener('change', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; }, false); document.getElementById('subject').addEventListener('keypress', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; }, false); document.getElementById('word_count').addEventListener('change', function() { alert('change fired'); }, false); <form> <div> <label for="story">string:</label> <textarea id="subject" name="subject"></textarea> </div> <div> <label for="story">count:</label> <input id="word_count"> </div> </form>intente esto (vea la consola para ver el resultado):
var old_count; document.getElementById('subject').addEventListener('change', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; if(!old_count)old_count=words else{ if(old_count!=words){ old_count=words document.getElementById('word_count').dispatchEvent(new Event('change')); } } // Dispatch/Trigger/Fire the event document.getElementById('word_count').dispatchEvent(new Event('change')); }, false); document.getElementById('subject').addEventListener('keypress', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; if(!old_count)old_count=words else{ if(old_count!=words){ old_count=words document.getElementById('word_count').dispatchEvent(new Event('change')); } } }, false); document.getElementById('word_count').addEventListener('change', function() { console.log('change fired:'+ old_count); }, false); <form> <div> <label for="story">string:</label> <textarea id="subject" name="subject"></textarea> </div> <div> <label for="story">count:</label> <input id="word_count"> </div> </form>Puede enviar un evento de cambio en su entrada. Consulte el ejemplo ( https://codepen.io/alekskorovin/pen/dyVyepg ):
document.getElementById('subject').addEventListener('change', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; }, false); document.getElementById('subject').addEventListener('keypress', function() { var string = this.value string = string.replace(/\s+/g, " "); var words = string.split(/\s+/).length; document.getElementById('word_count').value = words; const event = new Event('change'); document.getElementById('word_count').dispatchEvent(event); }, false); document.getElementById('word_count').addEventListener('change', function() { alert('change fired'); }, false); <form> <div> <label for="story">string:</label> <textarea id="subject" name="subject"></textarea> </div> <div> <label for="story">count:</label> <input id="word_count"> </div> </form>