Compruebe el siguiente código de ejemplo ejecutable...
var inputform = document.getElementById('input-form'); var form = document.getElementById('message'); var input = document.getElementById('usermsg'); function change(value) { const form =` <form name="message" action="" id="message"> <textarea name="usermsg" id="usermsg"></textarea> </form>`; const div = ` <div id="message"> <div id="usermsg"></div> </div>`; var content = value == "div" ? div : form; inputform.innerHTML = content; } usermsg.addEventListener('keypress', function(e) { if (e.which == 13 && !e.shiftKey && input.value) { input.value = ''; } }); <div id="input-form"> <form name="message" action="" id="message"> <textarea name="usermsg" id="usermsg"></textarea> </form> </div> <button onclick="change('div');">Press to div</button> <button onclick="change('form');">Press to form</button>Estoy usando este código para detectar cuando un usuario hace clic dentro del elemento
usermsg.addEventListener('keypress', function(e) { if (e.which == 13 && !e.shiftKey && input.value) { input.value = ''; } });Se supone que es un oyente, pero dejará de funcionar si el elemento cambia e incluso después, vuelve a su forma original.
¿Cómo puedo evitar que deje de funcionar solo con javascript?
Bien, esta es la respuesta:
inputform.addEventListener('keypress', function(e) { const tgt = e.target; if (tgt.id==="usermsg") { if (e.which == 13 && !e.shiftKey && tgt.value) { tgt.value = ''; } } });Gracias chicos.