Aureliaでキー入力イベントに基づいてテキストエリア内のカーソルの座標を取得する方法は？

Question

私はキープレスデリゲートイベントを追加しましたが、イベントでは座標を取得できません。

カーソルの位置にauto-suggestのリストを表示するには、topプロパティとleftプロパティのCSSを変更する必要があります。 .TSファイルで

<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> 

//コード：

autosuggest(event){ 
     //here i need the pageX and PageY or offset to set the postion 
     //this.autoSuggestTool.left = event.pageX; 
     //this.autoSuggestTool.top= event.pageY; 
     //**But in event i am not getting the co-ordinate of cursor inside textarea** 
     //How to get the co-ordinate of cursor on key press in aurelia. 
     } 

Answer 1

カーソル位置を使用して、最終的にはテキストエリア内のカーソルのピクセル位置を取得することができたと私は行数を使用しているので、文字をカウントし、より多くのコンテンツは、次に、選択候補リストDIVが下部に示されているテキストエリア内に追加された場合にダウンスクロールに

 //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 divは行数ごとに下部に表示されます。 これは、この手法の欠点にすぎません。

Answer 2

何をし委任されていることはkeypressあるので、何がにさらされていることはタイプKeyboardEventのイベントであり、それ故に何のことで情報が座標んです。しかしclickに委任

、mousedownなど（タイプMouseEvent）、あなたがpageXを見ることができるはず、clientXなど