切换内容点击可编辑答案

【问题标题】：Toggle contentEditable on click切换内容点击可编辑
【发布时间】：2013-04-13 21:27:02
【问题描述】：

我试图在单击时创建一个 div contentEditable，然后在鼠标移出时将 contentEditable 设置为 false，但到目前为止我还没有成功。单击链接似乎会突出显示它，但除此之外什么都不做：

<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>

我希望该链接在单击时将我带到链接的页面，但相反，它在单击时突出显示并且没有执行任何其他操作。我该如何解决这个问题？

【问题讨论】：

事实证明，即使链接不在 contentEditable div 内，该链接也无法正常工作。我想我已经找到原因了：stackoverflow.com/questions/15994328/…
Anderson Green 是对的——这是因为 jsFiddle 使用了 iFrame。这里还有一个使用类的通用解决方案：jsfiddle.net/dirkk0/8CNyw
gist.github.com/jameswyse/b5b9f42bf38e7c09262cb37ea44ce626

标签： javascript html contenteditable

【解决方案1】：

永远不要使用内联 html 脚本声明，这是一种不好的做法。我认为你的链接没有做任何事情的原因是，当你为你的 div 设置它时，事件监听器在它上面冒泡/传播并改变了它的默认 onclick 事件。

我建议你这样做。

        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>

【讨论】：

你怎么知道内联脚本声明被认为是一种不好的做法？
你测试过这个脚本了吗？我尝试运行它，仍然遇到和以前一样的问题：jsfiddle.net/GeVpe/20
把javascript和HTML混在一起是不好的，当你能用更好的方式做的时候，我想你可以用它来做一些简单的操作，但最终你会发现它对你来说还不够.如果你用谷歌搜索这个问题，你会发现很多关于它的文章。是的，我在发布之前尝试了脚本。在您的 jsfiddle 测试中，它对我也不起作用。我不知道为什么。尝试在 jsfiddle 之外对其进行测试。只需将其放入 html 文件并在浏览器中运行即可。对我来说很好。
是否使用事件处理程序属性的问题与手头的问题完全分开。
我测试了这里贴的解决方案，还是不行：jsfiddle.net/xSPgC你需要将链接的目标设置为"blank"。

【解决方案2】：

这里我们可以使用这段代码使html元素可编辑真假。

    $( "#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');
    }
    });

【讨论】：

最好在代码周围使用add more context/explanation（而不是仅提供代码答案），因为这样会使答案更有用。
感谢您的评论，我已添加内容。

【解决方案3】：

尝试将目标设置为blank：

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

【讨论】：