求助：点击contenteditable段落时如何选中全部文本？

问题原因 #

1. contenteditable="true" 的<p>元素不会像表单输入框那样触发标准的focus事件（触发时机不符合预期）；
2. jQuery的.select()方法仅对<input>、<textarea>这类表单控件生效，对可编辑段落不适用。

实现代码 #

用click事件替代focus，并使用原生的Range和Selection API实现全选：

$(".dbrEditableData").on("click", function () {
    const range = document.createRange();
    range.selectNodeContents(this);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
});

额外优化（可选） #

如果要支持Tab键切换焦点时也自动全选，可以同时监听focus事件，复用全选逻辑：

function selectEditableContent(el) {
    const range = document.createRange();
    range.selectNodeContents(el);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

$(".dbrEditableData").on("click focus", function () {
    selectEditableContent(this);
});

效果说明 #

点击或通过Tab键聚焦到可编辑段落时，段落内全部文本会被自动选中，此时直接输入即可覆盖原有内容。

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