Javascript：在textarea中获取光标的X和Y坐标/位置

Question

我有一个text-area，我将提供以下功能。

当用户在@中的任何光标点键入text-area时，应打开弹出窗口以从弹出字段列表中选择任何字段。请参考下图以获得清晰的想法。我使用 keyUp事件来实现此功能。

问题：我可以按照要求打开弹出窗口并关闭，但是无法获取特定位置，它应该像上面的图像一样打开，意味着它应该在用户类型@的相同x坐标处打开。我能够在鼠标事件上获得那些 X和Y坐标但在用户输入text-area时无法获得这些坐标。

我在Vue.Js中实现了上述功能，以下是基本代码。接受javascript中的解决方案，因为这是前端代码的一部分。

HTML：

<v-text-field id='myText' label="Insurer" v-on:keyup="onTextChange($event)" v-model="editText" multi-line></v-text-field>

事件：

onTextChange(event) { 
// In event object there is no such clientX/pageX like properties which available in mouse click event
}