Question

我有以下代码：

<div contentEditable="true">
    Blah blah <a href="http://google.com">Google</a> Blah blah
</div>

Fiddle

有没有办法让这个a可点击，而不是可编辑，而不将锚点移到该div之外？

Answer 1

将链接包装在另一个div中，如下所示：

<div contentEditable="true">

    <div contentEditable="false">
            Bla bla <a href="http://google.com">Google</a> Bla bla
    </div>
</div>

Answer 2

使链接本身不可编辑（至少在HTML5上有效）：

<a contenteditable="false" href="http....... >

Answer 3

据我所知，如果不使用Javascript自行编程，就无法做到这一点。执行此操作的简单方法是在按下 Ctrl 键时禁用并重新启用contentEditable。因此，当按下 Ctrl 时，链接是可点击的，否则不是。这意味着您仍然可以编辑链接的内容。此功能类似于Microsoft Word，IIRC。

代码可能如下所示：

var content = document.getElementById('content');

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 17) {          // when ctrl is pressed
        content.contentEditable = false; // disable contentEditable
    }
}, false);

document.addEventListener('keyup', function(event) {
    if (event.keyCode === 17) {          // when ctrl is released
        content.contentEditable = true;  // reenable contentEditable
    }
}, false);

Updated fiddle

Answer 4

要获得可点击和可编辑的链接，我在链接中放置了一个onclick-command。示例：

<a contenteditable="true" href="necessary?" onclick="document.location = 'www.xy.com';" ...>
    <img src="image.jpg" draggable="true" ...>
</a>

缺点是：在IE中，链接必须被单击两次。在移动Safari中显示了键盘（可以用Javascript隐藏）。

如何在contentEditable div中制作可点击锚点？

4 个答案: