如何获取光标在 textarea 中的位置

如何获取光标在 textarea 中的位置

这里的位置不是指光标所在的字符数位置，而是相对 textarea 的向上向左的大体像素位置。
你可以通过 textarea.selectionStart() 来获取光标在 textarea 文本中的字符位置，比如在第几个字符上。

一、如何获取大体的像素位置

这里介绍一下如何获取大体的像素位置。

先看效果，这下面的那个列表的位置就是计算出来的光标所在的位置。当然这个只在光标位于最后的时候有效。

比如行高是 30px ，一个文字左右距离大约也是 30px

1. 获取 top 位置

其实你只需要将 textarea 的 value 进行分隔，分隔 \n 就能知道有多少行文字，然后用行数 x 行高，就能得到结尾所处的距离 textarea 顶部的像素距离。

2. 获取 left 位置

只需要获取最后一行文字的字符数，然后 x 30px 就能得到大体的 left 位置。

let lineArray = content.split('\n').filter(item => item !== '')
this.keysPanelPositionTop = lineArray.length * 30
let lastWord = lineArray[lineArray.length - 1]
this.keysPanelPositionLeft = lastWord.length * 30