V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KyL
V2EX  ›  Web Dev

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

  •  
  •   KyL · 51 天前 · 1676 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2024-05-31 18:15:53 +08:00
    iOCZS
        1
    iOCZS  
       51 天前
    我觉得是原生特性
    KyL
        2
    KyL  
    OP
       51 天前
    @iOCZS 在 HTML 中似乎只有 input 或者 textarea 元素有输入光标这种特性。如何在 div 元素上实现这种特性呢?
    lscho
        3
    lscho  
       51 天前
    div 加 contenteditable 就可以输入啊
    elviscai
        4
    elviscai  
       51 天前
    MossFox
        5
    MossFox  
       51 天前
    指的是光标那个视觉效果的话,闪烁效果是 JS 修改 CSS 控制的,位置是编辑器窗口里的绝对布局控制的,不在文本那一行 div 里面。
    kealm
        6
    kealm  
       51 天前
    VSCode 的光标是模拟的,所以可以实现各种效果,不是浏览器原生的。
    MossFox
        7
    MossFox  
       51 天前
    闪烁光标可以有多个,这样设计是很合理的,只要计算出位置就可以同时显示一堆。
    试试按住鼠标中键在代码里面上下拖一下,看下那一批光标一起显示的效果。浏览器原生的光标做不到这种。
    DiamondYuan
        8
    DiamondYuan  
       51 天前 via Android
    vscode 是创建了一个隐藏的 input ,当你点击编辑器的时候,就会 focus 这个 input ,然后用 js 画一个光标出来。

    所有的事件会被这个 input 捕获,通过一写计算后,计算出新 input 的位置,然后渲染出来。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1107 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 67ms · UTC 23:15 · PVG 07:15 · LAX 16:15 · JFK 19:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.