In a text event?

Question

In a text event?

I am wondering if anyone knows how I could run a function if / when the user finishes selecting text on a web page? I would like the user to be able to select the text, and after a short delay (or right away, at the moment it does not matter much), an overlay button appears next to the text, which the user can then click on, and I go back and run more of my code, which based on choice. This is for the Firefox extension.

A similar example, which I might think of, would be similar to IE, where you can select text, and then it calls "web accelerators". I'm 99% sure that I know how to actually overlay a button and get the position of the selected text, but I have no idea how to check if there is something selected without doing some endless loop that just seems like a terrible idea .

EDIT:

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

This is what I came up with using Robert's suggestion, and it took me a while to find everything in the right place, but it works great! Now to set my button.

+58

javascript javascript-events dom-events firefox-addon

Robert Smith Sep 16 2018-10-22T00:

source share

7 answers

A little late for the party, but for later use ...

Look at the select DOM event on the MDN .

It fires when you release the mouse or key (at least in Chrome 40).

document.addEventListener('select', callback);

+8

jarsbe Feb 10 '15 at 6:13

source share

There is an event of its own for when a text selection is made / changed. selectionchange has basic support in most browsers, including IE , and will work with any text in the document, not just form elements.

 document.addEventListener("selectionchange",event=>{ let selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString() ; console.log(selection); })

 select this text

Please note, as his name implies that it is triggered by any change of choice. This way you will receive several calls to your callback function when you select text.

+5

Patrick Evans Sep 04 '18 at 2:21

source share

I would advise listening to the mouseup event, not selectionchange, since the latter fires quite a lot of events (up to the selected characters), you need to wait for some arbitrary period to get the final choice. Also @Robert and @Makyen, I created code for you to play:

 <!DOCTYPE html> <html> <body> <div onmouseup="showSelection()"> <p>Select some of the text. You can also listen to the mouseup event at the &lt;p&gt; 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>

+1

Marshal Mar 05 '19 at 23:02

source share

I think @ patrick-evans had the correct answer. This is perhaps the most far-sighted and supported API response - you just need to cancel the event to stop the flood.

I can not send an answer, but keep this in mind

 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?

+1

waffledonkey May 10 '19 at 3:49

source share

A solution using the mouseup trick is not the right solution. This is a hacker path, not a perfect one. Less effective as you now catch muscle for so much shit.

The real way to do this in Firefox addon is to use the addSelectionListener in this section: Watch the backlight?

Now, even if the user uses the keyboard to select, it is captured.

Credit to Neil for knocking me over where to find him on the MXR

0

Noitidart Mar 30 '14 at 10:27

source share

Just handle the mouseup event, as the user "releases" the key after selection:

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()" })

0

Cybernetic Mar 09 '19 at 22:13

source share

Robert · Accepted Answer · 2010-09-16 22:33

There is no onhighlightext or something like that, but the solution would be to link onmouseup to check if any text is selected if it is not in input / textarea .

Edit

Here is an example implementation for you. I tested this only in Chrome / Firefox / IE7. It also works on inputs.

http://jsfiddle.net/qY7gE/

Code from 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 Qaru 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]

In a text event?

Edit

More articles: