Toggle contentEditable on click
Solution 1
Don't ever use inline html script declaration, thats a bad practice. I think the reason your link doesn't do anything is, that the event listener bubbled/propagated over it and changed its default onclick event, when you set it for your div.
I suggest you do something like this.
window.onload = function() {
var div = document.getElementById('editable');
div.onclick = function(e) {
this.contentEditable = true;
this.focus();
this.style.backgroundColor = '#E0E0E0';
this.style.border = '1px dotted black';
}
div.onmouseout = function() {
this.style.backgroundColor = '#ffffff';
this.style.border = '';
this.contentEditable = false;
}
}
// And for HTML
<div id="content">
<span id='editable'>Surprisingly,</span>
<a href="http://google.com">clicking this link does nothing at all.</a>
</div>
Solution 2
Here we can make html element editable true and false using this code.
$( "#mylabel" ).click(function() {
// we get current value of html element
var value = $('#editablediv').attr('contenteditable');
//if its false then it make editable true
if (value == 'false') {
$('#editablediv').attr('contenteditable','true');
}
else {
//if its true then it make editable false
$('#editablediv').attr('contenteditable','false');
}
});
Anderson Green
I write source-to-source compilers in JavaScript using Peggyjs. I also write compilers in Prolog. For reference, I also have a list of source-to-source compilers on GitHub.
Updated on June 07, 2022Comments
-
Anderson Green almost 2 years
I'm trying to make a div contentEditable when it is clicked, and then set contentEditable to false on mouseout, but I've had no success so far. Clicking a link appears to highlight it, but otherwise does nothing at all:
<div id="content" contentEditable="true" onclick = "this.contentEditable = true;" onmouseout = "this.contentEditable = false;"> Surprisingly, <a href="http://google.com">clicking this link does nothing at all.</a> How can I fix this problem? </div>
I expected the link to take me to the linked page when it was clicked, but instead, it was highlighted when clicked and did nothing else. How can I fix this problem?