Is it possible to use onchange event in a <div>?
Because my <div> changes its text inside.
Can I do something like this?
<div id="name" onchange="calculateTotal();"></div>
Use onchange in a div
Viewed 61603
8 Answers
You can use 'onInput' instead of 'onChange'.
<div className="inputDiv" contenteditable="true" onInput={(e) => { console.log(e.currentTarget.textContent) }} />
Check the console log with Chrome Developer Tools (F12):
References: https://stackoverflow.com/a/52614631/8706661
It's a bit over most webdesigners paygrade but it's not any problem dom monitor a div. It's also pure html, nothing required.
The most easy way to show it is with a example. The Div is editable so just klick on it and type something and your javascript console will show what is going on. (if you don't know your way around the javascript debugger this might be to hard for you, so just learn it ;) )
<html>
<head>
<script>
// Run the code once the DOM is created, think jquery $(function(){}); but HTML5
document.addEventListener("DOMContentLoaded", function () {
const commandlineDiv = document.getElementById('commandline');
function mutationCallback(mutationsList, observer) {
console.log(mutationsList);
console.log(observer);
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
} else {
console.log('mutation.type: ' + mutation.type);
console.log('New value ' + JSON.stringify(mutation.target.data));
}
}
}
// Create an observer instance linked to the callback function
const observer = new MutationObserver(mutationCallback);
// What to observe
const mutationConfig = { attributes: true, childList: true, subtree: true, characterData: true };
observer.observe(commandlineDiv, mutationConfig);
})
</script>
</head>
<body>
<div id="commandline" contentEditable="true">commandline</div>
</body>
</html>
You can use onblur event. Onblur event working on table,div etc.
<div id="name" onblur="calculateTotal();"></div>
Related