这是一个创建于 497 天前的主题，其中的信息可能已经有所发展或是发生改变。
打开 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