双击后自动选择单元格内的值

收藏

在市面上的主流表格产品中，我们可以通过双击单元格来编辑单元格中的值，但在一些场景下，我们需要完全删除单元格中的值，并重新输入新的值。

正常情况下，我们需要先选中单元格，然后再删除单元格中的值，最后再重新输入新的值。

对于操作者来说，这会比较麻烦，因为我们需要先删除，才能再重新输入，或者需要先选中，然后直接输入新的值。

如果我们能够在进入编辑模式后直接选中单元格中的值，然后直接输入新的值，就可以大大简化操作流程。

在本文中，我们将介绍如何使用 JavaScript 实现这个功能。

spread.bind(GC.Spread.Sheets.Events.CellDoubleClick, (sender, { row, col }) => {
const div = document.querySelector("div[gcuielement='gcEditingInput']");
const range = document.createRange();
range.selectNodeContents(div);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});

复制代码

简单解释一下上面的代码：

1. 首先，我们使用 spread.bind 方法来监听单元格的双击事件。
2. 当单元格被双击时，我们会获取到单元格的 div 元素。
3. 然后使用 document.createRange 方法来创建一个范围对象。
4. 接着使用 range.selectNodeContents 方法来选择 div 元素中的所有内容。
5. 最后使用 window.getSelection 方法来获取当前的选择对象，并将范围对象添加到选择对象中。

这样，当单元格被双击时，我们就会自动选中单元格中的所有内容，然后我们就可以直接输入新的值了。

具体效果如下图：

115837sh9f6mzeenswrh25.gif140578002.png

		自动登录	找回密码
密码			立即注册

双击后自动选择单元格内的值

0 个回复

SpreadJS 认证

SpreadJS 高级认证