如何在Svelte/JS中实现td元素获焦时全选文本？

我需要实现元素获得焦点时自动选中内部全部文本，input元素通过select()方法可以正常实现，但设置了contenteditable="true"的td元素调用该方法却无效。请问在不使用jQuery的情况下，该如何实现这个功能？

我的原始代码如下：

<script>
    function handleFocus(e) {
        e.target.select();
    }
</script>

<input on:focus={handleFocus} value="Testing"/>
<td on:focus={handleFocus} contenteditable="true">Testing</td>

解决方案 #

select()方法仅适用于<input>、<textarea>这类表单控件，对于设置了contenteditable的元素，需要使用Range和Selection API来实现文本选中。修改后的处理函数如下：

<script>
    function handleFocus(e) {
        const element = e.target;
        // 针对contenteditable元素处理
        if (element.isContentEditable) {
            const selection = window.getSelection();
            const range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
        } else {
            // 普通表单元素仍用select()
            element.select();
        }
    }
</script>

<input on:focus={handleFocus} value="Testing"/>
<td on:focus={handleFocus} contenteditable="true">Testing</td>

代码说明 #

• 先判断当前元素是否为可编辑状态（isContentEditable）
• 若是，创建一个Range对象，通过selectNodeContents()选中元素内的全部内容
• 清除当前选区后，将创建的Range添加到选区中，完成全选
• 非可编辑的表单元素继续使用原生select()方法，保持原有逻辑

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