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

20

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

#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입니다.

javascript  html 
— 타 하조 트
소스
1
위치에 따라 문자열에서 "beome"의 문자 "b"의 색인이 무엇입니까?
— palaѕн
질문이 HTMLInputElement.selectionStart 및 selectionEnd 를 묻는 것처럼 느끼는 반면 답변은 대부분 선택 이벤트에 대해 이야기합니다. 그러나 다른 모든 답변에 포함 된 답변을 작성할 필요는 없습니다.
— JollyJoker
1
— Matsemann

답변:

24

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

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>
스 니펫 확장

— 카 람바
소스
2
꽤 깔끔한. +1
— Saharsh
2
마우스 대신 키보드를 사용하도록 선택하면 실행되지 않습니다.
— curiousdannii
1
@curiousdannii 답변을 업데이트했습니다. 이제 키보드 선택과도 호환됩니다.
— caramba
5

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>
— Dreamweaver
소스
1 
    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);
— 누한 아흐메드
소스
1

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>
스 니펫 확장

— Hiws
소스
나는 당신이 어떻게 구현했는지 좋아합니다 addSelfDestructiveEventListener!
— caramba
0 
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)
    }
});});
— 야세르 압델 막사 우드
소스
코딩하는 작업에 대해 약간의 설명을 추가 할 수 있습니까?
— 레이첼 맥기 건
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.