Please check the following executable example code ...
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>I'am using this code to detect when a user clicks inside the element
usermsg.addEventListener('keypress', function(e) {
if (e.which == 13 && !e.shiftKey && input.value) {
input.value = '';
}
});
It's supposed to be a listener but it will stop working if the element changes and even after, it changes back to its original form.
How can I prevent it from stop working with javascript only?
Okay, this is the answer:
inputform.addEventListener('keypress', function(e) {
const tgt = e.target;
if (tgt.id==="usermsg") {
if (e.which == 13 && !e.shiftKey && tgt.value) {
tgt.value = '';
}
}
});
Thank you guys.