I have a situation where I have an iframe that allows users to type and edit various divs within it. However, there is one specific div that should not be editable by the user. I have tried to prevent users from clicking on the div using JavaScript:
document.getElementById('mydiv').addEventListener('mousedown', function(event) {
event.preventDefault();
return false;
}, true);
Unfortunately, this method does not fully restrict users from editing the content as they can still navigate to the div using keyboard arrow keys. I attempted to handle focus events on the div:
document.getElementById('mydiv').addEventListener('focus', function(event) {
...
}, true);
However, this approach did not work as expected. I then tried to prevent keypress events on the div:
document.getElementById('mydiv').addEventListener('keydown', function(event) {
event.preventDefault();
return false;
}, true);
Once again, this method did not provide the desired outcome. I even explored attaching the callback to the document itself:
document.addEventListener('keydown', function(event) {
...
}, true);
This worked for triggering the callback, but I need a way to specifically cancel the event only when the target element is the problematic div.
If anyone has any suggestions or ideas on how to achieve this goal, please feel free to share them.