contenteditable添加粗体文本后输入文本自动加粗问题求助

这个问题我之前也碰到过！你遇到的核心问题是：当你通过html()方法直接拼接<strong>test</strong>后，光标默认会停留在这个<strong>标签的内部，所以后续输入的文本自然就继承了粗体样式。直接修改innerHTML的方式会重置整个元素的内容，同时把光标锁在新添加的粗体标签里，这就是问题的根源。

解决方案：手动控制光标位置 #

我们需要在插入粗体文本后，把光标精准移动到<strong>标签的外面，这样后续输入就会回到普通文本样式。下面是修改后的代码：

$('.button').on('click',function(e){
    const msgElement = $('.msg')[0]; // 获取原生DOM元素
    const range = document.createRange();
    const selection = window.getSelection();

    // 先把光标定位到内容末尾
    range.selectNodeContents(msgElement);
    range.collapse(false); // 折叠到内容末尾（光标落在最后）

    // 创建粗体元素并设置文本
    const boldText = document.createElement('strong');
    boldText.textContent = 'test';

    // 在光标位置插入粗体文本
    range.insertNode(boldText);

    // 将光标移动到粗体文本的后面
    range.setStartAfter(boldText);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
});

为什么这样有效？ #

1. 没有直接拼接HTML字符串，而是通过原生DOM方法创建并插入<strong>元素，避免了重新渲染整个内容导致的光标丢失问题。
2. 最后通过Range和Selection API，把光标精准定位到粗体文本的外部，确保后续输入的文本不会继承粗体样式。

这种方法兼容性好，也更可控，完全能满足你“仅点击按钮时添加粗体文本，后续输入保持普通样式”的需求。

内容的提问来源于stack exchange，提问作者user1150224