链接内的内容可编辑块，如何防止重定向，但让文本选择插入符号位置更改

Contenteditable block inside link, how to prevent redirect but let text selectioncaret position changes?

本文关键字：选择 插入 文本 符号 位置 何防止 编辑 链接 重定向      更新时间：2023-09-26

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

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

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

我认为

如果不使整个链接可编辑，就不会有很好的方法来做到这一点：

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

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

这是我的做法：

  1. 防止内容可编辑内容中的默认点击
  2. 对于 Firefox，删除并添加 href-属性以防止将光标放在 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))
    }
});
相关文章：