[javascript] JavaScript의 텍스트 영역에서 선택한 텍스트 위치를 얻는 방법은 무엇입니까?

자바 스크립트를 사용하여 선택한 텍스트 위치를 얻고 싶습니다. 예를 들어

간단한 텍스트 영역이 있습니다.

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

스 니펫 확장

내 텍스트 영역에는 다음과 같은 텍스트가 있습니다.

"I am a student and I want to become a good person"

이 문자열에서 텍스트 영역에서 “좋은 사람이되었습니다”를

선택하면 Javascript에서 선택한 텍스트 / 문자열 위치를 어떻게 얻을 수 있습니까?

여기서 선택한 문자열 문자는 29에서 시작하여 49로 끝납니다. 따라서 시작 위치는 29이고 끝 위치는 49입니다.

답변

페이지의 모든 텍스트 영역 요소에 대해 마우스와 키보드를 사용하여 텍스트를 선택할 때 작동합니다. 키보드 선택을 원하지 않거나 필요하지 않은 경우 선택기를 변경하고 더 구체적으로 설명을 읽고 주석을 읽으십시오.

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)
        }
    });
});

textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}

<textarea>I am a student and I want to become a good person</textarea>

스 니펫 확장

답변

onselect 이벤트를 사용 하여 동일 하게 만들 것입니다 .

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

답변

    var idoftextarea='answer';
    function getSelectedText(idoftextarea){
        var textArea = document.getElementById(idoftextarea);
        var text =textArea.value;
        var indexStart=textArea.selectionStart;
        var indexEnd=textArea.selectionEnd;
        alert(text.substring(indexStart, indexEnd));

    }


    getSelectedText(idoftextarea);

답변

Caramba 답변은 꽤 훌륭했지만 텍스트를 선택하고 텍스트 영역 외부 에서 마우스를 놓으면 이벤트가 시작되지 않는 문제가 발생했습니다.

이 문제를 해결하기 위해 초기 이벤트를로 변경했습니다 mousedown.이 이벤트 mouseup는 문서에서 이벤트를 등록 하여 커서를 놓은 후에 발생하도록합니다. mouseup가 발사 후 이벤트는 다음 자체를 제거합니다.

이것은 once옵션을 추가하여 달성 할 수 addEventListener있지만 슬프게도 IE11에서는 지원되지 않으므로 코드 조각에서 솔루션을 사용했습니다.

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);
};

function addSelfDestructiveEventListener (element, eventType, callback) {
    let handler = () => {
        callback();
        element.removeEventListener(eventType, handler);
    };
    element.addEventListener(eventType, handler);
};

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for those
    element.addEventListener('mousedown', function(){
      // This will only run the event once and then remove itself
      addSelfDestructiveEventListener(document, '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)
        }
    });
});

textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}

<textarea>I am a student and I want to become a good person</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)
    }
});});