Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

On Text Highlight Event?

I'm curious if anyone knows how I would trigger a function to run if/once the user finishes selecting text on the web page? I would like the user to be able to select text, and after a short delay(or immediately, at this point it doesn't matter much) an overlay button appears near the text that the user can then click and I go back and run more of my code that is based on the selection. This is for a Firefox extension.

A similar example that I can think of would be like in IE where you can select text and then it brings up the "web accelerators". I'm 99% sure I know how I would actually overlay the button, and get the position of the selected text, but I have no idea how to check to see if there is anything selected, without doing some sort of infinite loop, which 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; 

So this is what I have come up with using Robert's suggestion, and it took me some time getting everything in the right spot, but it works great! Now on to position my button.

like image 611
Robert Smith Avatar asked Sep 16 '10 22:09

Robert Smith


People also ask

What event occurs when user highlights text in text field?

The onselect event occurs after some text has been selected in an element. The onselect event is mostly used on <input type="text"> or <textarea> elements.

How do you highlight something in a text?

Tap on the annotations icon at the bottom of the preview screen to open the annotations toolbar. You will see a set of tools appear. Next, select the highlight text tool. Tap and drag on a section of text within the file itself to highlight it.

What highlight text means?

Highlighting text allows a user to move, copy, or cut that selected text. Highlighting an object, such as an icon, also allows it to be cut, copied, deleted, moved, viewed, opened, or otherwise manipulated. Above is an example of highlighted text in a text editor.

What is a text highlight color?

In a Microsoft Word document or a PowerPoint slide, highlighting text with color helps bring attention to that text. If you want to make sure readers pay attention to important content, highlight the text in yellow or another light color, to ensure they see it and can read it.


1 Answers

There isn't any onhighlightext or anything like that, but a solution would be to bind onmouseup to check if any text is selected if this isn't in a input/textarea.

Edit

Here's an implementation example for you. I only tested this in Chrome/Firefox/IE7. This works in inputs as well.

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 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]
like image 147
Robert Avatar answered Sep 21 '22 15:09

Robert