如何获取光标在 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