[Javascript] Textarea 에서 마우스 클릭 좌표 얻는 방법

자바스크립트를 사용해서 Textarea 태그에서 클릭한 좌표를 얻고 싶다.

Html 과 Css 구성은 이렇게 되있다고 치자

#input-text {
  resize: none;
  width: 50%;
  height: 50px;
  margin: 1rem auto;
}

<textarea id="input-text">I am a student and I want to become a good person</textarea>

 

페이지의 모든 Textarea 영역 요소에 대해 마우스와 키보드를 사용하여 좌표를 얻을 때 작동하는 소스다.

키보드를 제외하려는 경우 주석을 읽어보도록 한다. 

 

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);

  };

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for the mouse
    element.addEventListener('mouseup', function(){
        mySelection(element)
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});

 

단순하게 onselect 이벤트를 사용해서 해당 Textarea 의 선택 좌표를 얻으려면 다음과 같다.

 

<textarea id="input-text" onselect="myFunction(event)">I am a student and I want to become a good person</textarea>


<script>
    function myFunction(event) {
      const start  = event.currentTarget.selectionStart;
      const end= event.currentTarget.selectionEnd;
    }
</script>