javascript - Toggle contentEditable on click - Stack Overflow

admin管理员组

文章数量:1290978

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=";>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?

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:

http://jsfiddle/GeVpe/19/

<div id="content" contentEditable="true"
     onclick = "this.contentEditable = true;" 
     onmouseout = "this.contentEditable = false;">
  Surprisingly, 
  <a href="http://google.">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?

• javascript
• html
• contenteditable

Share Improve this question Follow edited Nov 23, 2024 at 15:34 Roland 5,23277 gold badges5757 silver badges8686 bronze badges asked Apr 13, 2013 at 21:27 Anderson GreenAnderson Green 31.9k7070 gold badges210210 silver badges339339 bronze badges 4

• It turns out that the link is not working even when it isn't inside a contentEditable div. I think I've found out why: stackoverflow./questions/15994328/… – Anderson Green Commented Apr 14, 2013 at 0:20
• Anderson Green is right - it's because jsFiddle uses iFrames. Also a somewhat generic solution using classes is here: jsfiddle/dirkk0/8CNyw – dirkk0 Commented May 24, 2013 at 10:17
• gist.github./jameswyse/b5b9f42bf38e7c09262cb37ea44ce626 – neverMind9 Commented Jun 23, 2019 at 11:50
• I guess in 2013 this was not yet a big topic, but as of 2024 I would really remend to remove the http:// part of the URL in the a element. In most cases it will be https, and the browser is perfectly able to figure this out. http might even not work at all because of HSTS , and Google does not index sites without https. – Roland Commented Nov 23, 2024 at 15:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.">clicking this link does nothing at all.</a>
</div>

Try setting the target to blank:

<div id="content" contentEditable="true" onclick = "this.contentEditable = true;" onmouseout = "this.contentEditable = false;">
    Surprisingly, <a href="http://google." target = "blank">clicking this link does nothing at all.</a> How can I fix this problem?
</div>

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 (value == 'false') {
        //if its false then it makes editable true
        $('#editablediv').attr('contenteditable','true');
    }
    else {
        //if its true then it make editable false
        $('#editablediv').attr('contenteditable','false');
    }
});

本文标签： javascriptToggle contentEditable on clickStack Overflow