VSCode 这种基于 Web 的文本编辑器中的输入光标是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 183 天前的主题，其中的信息可能已经有所发展或是发生改变。

打开 VSCode 自带的 Developer Tools 检查编辑器的元素，可以发现编辑器界面是由 div 元素组成的，一个 div 元素代表一行文本。当鼠标选择某一行时，这行的 div 会被添加 class ，展示不同的外观。那么点击这行后，一闪一闪的光标是怎么实现的？是靠动画吗？

8 条回复 • 2024-05-31 18:15:53 +08:00

iOCZS

183 天前

我觉得是原生特性

KyL

183 天前

@iOCZS 在 HTML 中似乎只有 input 或者 textarea 元素有输入光标这种特性。如何在 div 元素上实现这种特性呢？

lscho

183 天前

div 加 contenteditable 就可以输入啊

elviscai

183 天前

MossFox

183 天前

指的是光标那个视觉效果的话，闪烁效果是 JS 修改 CSS 控制的，位置是编辑器窗口里的绝对布局控制的，不在文本那一行 div 里面。

kealm

183 天前

VSCode 的光标是模拟的，所以可以实现各种效果，不是浏览器原生的。

MossFox

183 天前

闪烁光标可以有多个，这样设计是很合理的，只要计算出位置就可以同时显示一堆。
试试按住鼠标中键在代码里面上下拖一下，看下那一批光标一起显示的效果。浏览器原生的光标做不到这种。

DiamondYuan

183 天前 via Android

vscode 是创建了一个隐藏的 input ，当你点击编辑器的时候，就会 focus 这个 input ，然后用 js 画一个光标出来。

所有的事件会被这个 input 捕获，通过一写计算后，计算出新 input 的位置，然后渲染出来。