这是一个创建于 518 天前的主题，其中的信息可能已经有所发展或是发生改变。
打开 VSCode 自带的 Developer Tools 检查编辑器的元素，可以发现编辑器界面是由 div 元素组成的，一个 div 元素代表一行文本。当鼠标选择某一行时，这行的 div 会被添加 class ，展示不同的外观。那么点击这行后，一闪一闪的光标是怎么实现的？是靠动画吗？
 |
1
iOCZS 2024-05-31 14:55:25 +08:00
我觉得是原生特性
|
 |
2
KyL OP @iOCZS 在 HTML 中似乎只有 input 或者 textarea 元素有输入光标这种特性。如何在 div 元素上实现这种特性呢？
|
 |
3
lscho 2024-05-31 14:59:33 +08:00
div 加 contenteditable 就可以输入啊
|
 |
4
elviscai 2024-05-31 15:00:19 +08:00
|
 |
5
MossFox 2024-05-31 15:04:59 +08:00
指的是光标那个视觉效果的话，闪烁效果是 JS 修改 CSS 控制的，位置是编辑器窗口里的绝对布局控制的，不在文本那一行 div 里面。
 |
 |
6
kealm 2024-05-31 15:06:11 +08:00
VSCode 的光标是模拟的，所以可以实现各种效果，不是浏览器原生的。
|
|
7
MossFox 2024-05-31 15:06:59 +08:00
闪烁光标可以有多个，这样设计是很合理的，只要计算出位置就可以同时显示一堆。
试试按住鼠标中键在代码里面上下拖一下，看下那一批光标一起显示的效果。浏览器原生的光标做不到这种。 |
 |
8
DiamondYuan 2024-05-31 18:15:53 +08:00 via Android
vscode 是创建了一个隐藏的 input ，当你点击编辑器的时候，就会 focus 这个 input ，然后用 js 画一个光标出来。
所有的事件会被这个 input 捕获，通过一写计算后，计算出新 input 的位置，然后渲染出来。 |
Select Language