用 Canvas API 强制计算 textarea 光标像素位置

JavaScript jiyinyiyong 发表于 2 年前

前面有个高大上的 At.js 可以获取位置, 似乎通过模拟 DOM 得到的
而在 textarea 当中就做不到了, 只能拿到字数个数的位置
特别是我们用了 React 之后, 计算位置遇到一个问题, 就是 At.js 的方案太低效了
拷贝 DOM 需要消耗大量性能

于是折腾了很久, 我们找到的方案是用 Canvas API 计算位置
代码 https://github.com/teambition/react-lite-textbox
Demo http://ui.talk.ai/react-lite-textbox/
简单的情况是可以计算准确的, 只是在一些复杂的情况还没有处理好, 比如

  • 中文标签在行首的情况, 浏览器的文本布局会避免标点出现在行首, 我们没处理
  • 英文字符单个单词长度超出输入框的宽度的情况, 也没有处理
  • 其他语种可能存在的特殊情况

当然前两个等出现场景多了可以投入时间改进一下..
如果有类似需求的同学, 可以参考下我们的实现, 性能比 DOM 快多了的

暂无回复,说出你的观点吧
登录后即可参与回复