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

[KyL]

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

[iOCZS]

我觉得是原生特性

[KyL]

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

[lscho]

div 加 contenteditable 就可以输入啊

[elviscai]

不光会闪，还能换颜色呢: https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color

[MossFox]

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

[kealm]

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

[MossFox]

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

[DiamondYuan]

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

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