Use onchange in a div
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>
No; the onchange attribute is only applicable to form field elements (input, select, textarea, etc).
Since you say you're using AJAX, why not execute the function when you update the text. I'm not sure if you use any library, but in case it's jQuery just do:
$.ajax({ ...,
success: function() {
... other things ...
... setting div text ...
calculateTotal();
}
});
As you are changing the text yourself, just call calculateTotal when the AJAX call completes and the text has been placed in the element.
Example (using jQuery):
$('#name').load('GetFragment.php', calculateTotal);
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 to monitor a div using the dom. It's also pure vanilla javascript, so nothing required.
The most easy way to show it is with a example. The Div is editable so just click 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>
Onchange is called when user changed input value. So answer is yes, but it will have no effect. I assume you change content programmatically, so add simple code which will call this function
You can use onblur event. Onblur event working on table,div etc.
<div id="name" onblur="calculateTotal();"></div>
Change your div to a textarea or button or input You can't use onchange in div
加载中,请稍侯......
精彩评论