자바스크립트에서 선택한 텍스트 이벤트 트리거

자바스크립트에서 선택한 텍스트 이벤트 트리거

마우스를 사용하여 페이지에서 주어진 텍스트 조각을 선택할 때 자바스크립트 기능을 트리거하는 방법은?
그리고 선택한 텍스트의 위치를 페이지에서 찾을 수 있는 방법은 없나요?

업데이트: 좀 더 명확하게 말하면, 텍스트 조각은 문장이나 단어, 구 또는 문단 전체의 일부가 될 수 있습니다.

업데이트: 그동안 "Text selected"(DOM) 이벤트가 생성되었으며 현재 모든 브라우저에서 지원됩니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event

이 이벤트는 API에 추가된 폼 요소에서만 작동합니다.

---

"텍스트가 선택되었습니다"가 없습니다.(DOM)이벤트, 하지만 당신은 a를 묶을 수 있습니다.mouseup에 대한 행사.document.body. 이벤트 핸들러 내에서, 당신은 단지

document.selection.createRange().text

아니면

window.getSelection()

방법들.스택 오버플로우에는 웹 페이지에서 선택한 텍스트의 단락을 가져오는 자바스크립트와 같은 여러 주제가 있습니다.

"자리 찾기"가 무슨 뜻인지는 모르겠지만, 제 본보기에 머물려면event propertysX+Y 마우스 위치의 경우.

예: http://www.jsfiddle.net/2C6fB/1/

다음은 간단한 매시업입니다.

$('div').mouseup(function() {
    var text=getSelectedText();
    if (text!='') alert(text);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}​

<div>Here is some text</div>

데모: http://jsfiddle.net/FvnPS/11/

이를 다루는 새로운 실험용 API가 있습니다.

문서의 선택 오브젝트가 수정되거나 문서와 관련된 선택이 수행될 때 Selection API의 선택 변경 이벤트가 실행됩니다.<input>아니면.<textarea>변화들.선택 변경 이벤트는 첫 번째 경우의 문서에서, 두 번째 경우의 요소에서 발생합니다.

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

이 기능은 주요 브라우저에서도 작동할 수 있는 기능이 아닌 bleading edge입니다.

마우스는 확실하지 않지만 이 줄은 모바일용으로 작동합니다. 텍스트 선택을 변경할 때마다 호출됩니다.

document.addEventListener('selectionchange', () => {

});

마우스 버튼을 누르면mousedown이벤트가 발생합니다. 마우스 버튼이 해제되면mouseup그리고 나서.click이벤트가 발생합니다.

그래서 우리는 그 말을 듣습니다.mouseup선택한 텍스트가 있는지 확인하고 각각의 작업을 수행합니다.

const p = document.getElementById('interactiveText');

p.addEventListener('mouseup', (e) => {
  const selection = window.getSelection().toString();

  if (selection === '') {
    console.log('click');
  } else {
    console.log('selection', selection);
  }
});

AFAIK, 당신이 설명한 그런 이벤트는 없습니다.하지만 당신은 그 기능을 본받을 수 있습니다.

코드와 데모는 이쪽을 보세요.

"텍스트가 선택되었습니다" 이벤트가 있습니다.하지만 제가 알고 있는 텍스트 영역에 한해서요.

<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介，不少于200字！
</textarea>

이벤트 개체에서 선택한 텍스트를 가져오는 바로 가기가 있습니다.

event.currentTarget[event.currentTarget.selectedIndex].text

MDN에서 확인하실 수 있습니다. 바로 필요한 것입니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event

이벤트가 트리거되고 선택이 완료되면 선택한 텍스트를 반환합니다.

선택 항목이 변경될 때마다 선택한 텍스트를 켜려면 다음과 같이 하십시오.문서 및 html 입력 및 텍스트 영역 선택 변경 이벤트가 있습니다.문서에 대한 선택 변경 이벤트는 대부분의 브라우저에서 지원되지만 html 입력 및 텍스트 영역 요소에 대해서는 Firefox에서만 지원됩니다.

모든 브라우저를 지원하는 폴리필이 있습니다.

https://github.com/channyeintun/selection

var selectedText = "";

if (window.getSelection) {
    selectedText = window.getSelection();
}

if (document.getSelection) {
    selectedText = document.getSelection();
}

if (document.selection) {
    selectedText = document.selection.createRange().text;
}

function textSelector() {
   alert(selectedText);
}
textSelector();

언급URL : https://stackoverflow.com/questions/3545018/selected-text-event-trigger-in-javascript