텍스트 하이라이트 이벤트?
사용자가 웹 페이지에서 텍스트 선택을 마치면 실행되는 함수를 트리거하는 방법을 아는 사람이 있는지 궁금합니다. 사용자가 텍스트를 선택할 수 있기를 바랍니다. 잠시 후 (또는이 시점에서 즉시 중요하지 않음) 사용자가 클릭 할 수있는 텍스트 근처에 오버레이 버튼이 나타나고 다시 돌아가서 실행할 수 있습니다. 선택을 기반으로하는 더 많은 내 코드. 이것은 Firefox 확장을위한 것입니다.
내가 생각할 수있는 비슷한 예는 IE에서와 같이 텍스트를 선택하면 "웹 가속기"가 나타납니다. 실제로 버튼을 오버레이하고 선택한 텍스트의 위치를 얻는 방법을 99 % 확신하지만, 무한 루프를 수행하지 않고 선택한 항목이 있는지 확인하는 방법을 모릅니다. 끔찍한 생각처럼 보입니다.
편집하다:
//In my overlay.js with the rest of my sidebar code
isTextSelected: function () {
var myText = cqsearch.getSelectedText();
var sidebar = document.getElementById("sidebar");
var sidebarDoc = sidebar.contentDocument || document;
var curHighlightedDiv = sidebarDoc.getElementById("testDiv");
curHighlightedDiv.innerHTML = "Current text selection:" + myText;
}
};
//In my on firefox load function I added this
document.onmouseup = cqsearch.isTextSelected;
그래서 이것이 제가 Robert의 제안을 사용하여 생각 해낸 것입니다. 그리고 모든 것을 올바른 위치에 가져 오는 데 시간이 좀 걸렸지 만 훌륭하게 작동합니다! 이제 내 버튼을 배치하겠습니다.
그 onhighlightext와 비슷한 것이 없지만 해결책은 onmouseup이것이 input/에 없는 경우 텍스트가 선택되었는지 확인 하기 위해 바인딩 하는 것 textarea입니다.
편집하다
다음은 구현 예입니다. 나는 이것을 Chrome / Firefox / IE7에서만 테스트했습니다. 이것은 입력에서도 작동합니다.
JSFiddle의 코드 :
var t = '';
function gText(e) {
t = (document.all) ? document.selection.createRange().text : document.getSelection();
document.getElementById('input').value = t;
}
document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);<input type='text' id='input' />
In software, a stack overflow occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When too much memory is used on the call stack the stack is said to overflow, typically resulting in a program crash.[1] This class of software bug is usually caused by one of two types of programming errors.[2]파티에 조금 늦었지만 향후 참조를 위해 ...
MDN 의 selectDOM 이벤트를 살펴보십시오 .
마우스 또는 키를 놓으면 실행됩니다 (적어도 Chrome 40에서는).
document.addEventListener('select', callback);
텍스트 선택이 이루어 지거나 변경 될 때에 대한 기본 이벤트가 있습니다. selectionchange이 IE를 포함한 대부분의 브라우저에 기본 지원 , 그냥 요소를 형성하지 문서 내의 텍스트를 작동합니다.
document.addEventListener("selectionchange",event=>{
let selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString() ;
console.log(selection);
})select this text이름에서 알 수 있듯이 선택 항목이 변경되면 실행됩니다. 따라서 텍스트를 선택하면 콜백 함수가 여러 번 호출됩니다.
후자가 꽤 많은 이벤트 (선택된 문자까지)를 발생시키기 때문에 selectionchange보다는 mouseup 이벤트를 듣는 것이 좋습니다. 최종 선택을 얻으려면 임의의 기간을 기다려야합니다. Ditto @Robert 및 @Makyen, 여러분이 플레이 할 수있는 몇 가지 코드를 만들었습니다.
<!DOCTYPE html>
<html>
<body>
<div onmouseup="showSelection()">
<p>Select some of the text. You can also listen to the mouseup event at the <p> level</p>
<p>Anthoer paragraph and text</p>
<input type="text" value="Hello world!" onselect="showSelection()">
</div>
Outside of div, selection won't work as there is no listener if you don't uncomment the line: document.onmouseup = showSelection
<script>
// document.onmouseup = showSelection // listen to the mouseup event at document level
function showSelection() {
console.log('Selection object:', window.getSelection()) // same as document.getSelection()
console.log('Selected text:', window.getSelection().toString())
}
</script>
</body>
</html>@ patrick-evans가 정답을했다고 생각합니다. 가장 진보적이고 API를 지원하는 답변입니다. 홍수를 막기 위해 이벤트를 디 바운스하기 만하면됩니다.
I'm not able to post a reply, but consider this
function debounce(fn, delay) {
let timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
};
document.addEventListener("selectionchange", debounce(function (event) {
let selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString() ;
console.log(selection);
}, 250));Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad est veniam facere culpa expedita optio iste labore doloremque autem illo, in voluptatibus error ea, ab reprehenderit placeat facilis animi iure?The solution using the mouseup trick is not the proper solution. That is a hacky way and not perfect. Less efficient too as you are now catching mouseups for so much crap.
The real way to do it in Firefox addon is to use addSelectionListener see this topic: Observe for highlight?
Now even if user uses keyboard to make selections it is caught.
Credit to Neil for tipping me off on where to find it on MXR
Just handle the mouseup event, since a user "lets go" of the key after highlighting:
Vanilla JS
//Directly within element
<p class='my_class' onmousedown="my_down_function()" onmouseup="my_up_function()">
//On element
my_element = document.querySelector('.my_class');
my_element.onmousedown = function (e) { my_down_function(e); };
my_element.onmouseup function (e) { my_up_function(e); };
jQuery
$('.my_class').mousedown(function() {
my_down_function()
})
$('.my_class').mouseup(function() {
my_up_function()
})
Azle
az.add_event('my_class', 1, {
"type" : "mousedown",
"function" : "my_down_function()"
})
az.add_event('my_class', 1, {
"type" : "mouseup",
"function" : "my_up_function()"
})
참고URL : https://stackoverflow.com/questions/3731328/on-text-highlight-event
'Program Tip' 카테고리의 다른 글
| 특정 크기의 플롯 창 만들기 (0) | 2020.12.12 |
|---|---|
| Python : 객체가 시퀀스인지 확인 (0) | 2020.12.12 |
| Button 매개 변수 "command"가 선언 될 때 실행되는 이유는 무엇입니까? (0) | 2020.12.12 |
| 자식 div를 부모 너비에 맞추는 크로스 브라우저 방법 (0) | 2020.12.12 |
| 고정 위치 컨테이너에서 콘텐츠 일부 스크롤 (0) | 2020.12.12 |