Javascript 在Aurelia中，如何根据按键事件获取文本区域内光标的坐标？

我添加了一个按键代表事件，但未获得事件的坐标

我需要坐标来显示一个列表的自动建议在光标位置改变它的css的顶部和左侧属性

<div class="dropdown suggest  open" data-key="." css="display: ${autoSuggestTool.display}">
                                    <ul class="dropdown-menu" role="menu" css="top:${autoSuggestTool.top}; left: ${autoSuggestTool.left};">
                                        <li data-value="Test" class="active "><a href="#"><small>Test</small></a></li>                                                         </ul>
                                </div>
<textarea class="form-control" rows="5" cols="6" id="comment" value.bind="textAreaValue" keypress.delegate="autoSuggest($event)" placeholder="Type text "></textarea>

---

由于您授权的是keypress，因此您所暴露的是KeyboardEvent类型的事件，因此其中没有坐标信息

---

但是，通过单击、鼠标下移等方式键入MouseeEvent，您应该能够看到pageX、clientX等。

最终能够使用光标位置、计数字符和识别行号来获得文本区域内光标的像素位置

     //Show and hide autoSuggestTool
     private showOverLayDiv(event) {
         this.index = 0;
         //get the cursor position inside the textarea
         this.getCursorPosition(event);
         //get the line number
         this.getLineNumber(event);
         //set the css left of the div
         this.autoSuggestTool.left = event.target.offsetLeft + (this.textAreaCursorPosition * 5) + "px";
         //set the css top of the div
         this.autoSuggestTool.top = (this.textAreaLineNumber * 24) + "px";
         this.autoSuggestTool.display = "block";


     }
     private getLineNumber(event)
     {
         this.textAreaLineNumber = event.target.value.substr(0, event.target.selectionStart).split("\n").length;

     }
     public getCursorPosition(event)
     {
         let pos = event.target.selectionStart;
         //set the text area cursor position 
         this.textAreaCursorPosition = pos - this.prevLine(event.target);


     }
     // get the location based on the characters in text area
     public prevLine(target)
     {
         let lineArr = target.value.substr(0, target.selectionStart).split("\n");

         let numChars = 0;

         for (var i = 0; i < lineArr.length - 1; i++) {
             numChars += lineArr[i].length + 1;
         }

         return numChars;
     }

//但是，上面的代码会向下滚动，如果文本区域内添加了更多内容，则底部会显示autosuggest List div，因为我在这里使用了增加的行数，文本区域会滚动。因此，文本区域仅在现在获得滚动时保留，但Autosuggest div按行数显示在底部。

---

这只是这项技术的一个缩影。

好的，谢谢。但是，在Aurelia中，有没有其他方法可以基于按键获得文本区域内的坐标呢。因此，这些坐标可用于根据输入的键设置自动建议列表的位置。我尝试了上面的event.target.getBoundingClientRect，但它仅给出文本区域的坐标，而不给出按下键的文本区域内的光标位置点。

     //Show and hide autoSuggestTool
     private showOverLayDiv(event) {
         this.index = 0;
         //get the cursor position inside the textarea
         this.getCursorPosition(event);
         //get the line number
         this.getLineNumber(event);
         //set the css left of the div
         this.autoSuggestTool.left = event.target.offsetLeft + (this.textAreaCursorPosition * 5) + "px";
         //set the css top of the div
         this.autoSuggestTool.top = (this.textAreaLineNumber * 24) + "px";
         this.autoSuggestTool.display = "block";


     }
     private getLineNumber(event)
     {
         this.textAreaLineNumber = event.target.value.substr(0, event.target.selectionStart).split("\n").length;

     }
     public getCursorPosition(event)
     {
         let pos = event.target.selectionStart;
         //set the text area cursor position 
         this.textAreaCursorPosition = pos - this.prevLine(event.target);


     }
     // get the location based on the characters in text area
     public prevLine(target)
     {
         let lineArr = target.value.substr(0, target.selectionStart).split("\n");

         let numChars = 0;

         for (var i = 0; i < lineArr.length - 1; i++) {
             numChars += lineArr[i].length + 1;
         }

         return numChars;
     }