javascript - 链接内的 Contenteditable 块，如何防止重定向但让文本选择\插入符号位置发生变化？

Question

这是演示：http: //jsfiddle.net/qh7Sq/

我希望能够编辑链接内的跨度，实际上我可以通过防止冒泡传播阻止插入符号更改操作的某些部分。

请不要建议不同的标记，只有 javascript。

Answer 1

如果不使整个链接可编辑，我认为不会有这样做的好方法：

$('a').prop("contentEditable", "true");

演示：http: //jsfiddle.net/qh7Sq/1/

Answer 2

我就是这样做的：

1. 防止在 contenteditables 内点击默认
2. 对于 firefox，删除并添加 href-attribute 以防止将光标放在 contenteditable-element 的开头

https://jsfiddle.net/e15j8oq9/1/

// if contenteditable inside a link
document.addEventListener('click', e=>{
    if (e.button !== 0) return;
    if (e.target.isContentEditable) {
        e.preventDefault();
    }
    if (e.explicitOriginalTarget && e.explicitOriginalTarget.isContentEditable) { // keyboard click firefox
        e.preventDefault();
    }
});

// prevent (Firefox) placing cursor incorrectly
document.addEventListener('mousedown', e=>{
    if (!e.target.isContentEditable) return;
    var link = e.target.closest('a');
    if (link) {
        const href = link.getAttribute('href')
        link.removeAttribute('href');
        setTimeout(()=>link.setAttribute('href', href))
    }
});