如何实现Tab切换span元素时自动选中内容，模拟Excel操作？

解决思路 #

你已经通过tabindex实现了Tab焦点切换，现在只需要给每个Span绑定焦点事件，在它获得焦点时自动选中内部的全部文本，就能实现Excel式的操作体验。

具体实现 #

1. 更新HTML输出 #

给每个Span添加onfocus事件，调用统一的选中文本函数；如果需要直接在Span内修改值，可添加contenteditable="true"属性：

WriteHTML("<TD id='tdA1' runat='server'><span tabindex='0' style=FONT-SIZE:11pt id='A1' runat='server' contenteditable='true' onfocus='selectText(this)'>" + Rate1 + "</span></TD>");
WriteHTML("<TD id='tdA2' runat='server'><span tabindex='1' style=FONT-SIZE:11pt id='A2' runat='server' contenteditable='true' onfocus='selectText(this)'>" + Rate2 + "</span></TD>");
WriteHTML("<TD id='tdA3' runat='server'><span tabindex='2' style=FONT-SIZE:11pt id='A3' runat='server' contenteditable='true' onfocus='selectText(this)'>" + Rate3 + "</span></TD>");

2. 添加JavaScript函数 #

在页面的<script>标签中加入以下代码，负责选中元素内的全部文本：

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

关键说明 #

• 保留原有tabindex设置，确保Tab键按预设顺序切换焦点。
• contenteditable="true"为可选属性，若你原本通过弹窗修改值，可移除该属性，仅保留焦点选中文本的逻辑。
• 该方案基于原生Selection和Range API实现，兼容所有现代浏览器，无需依赖第三方框架。

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