Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery: select text event

is it possible that when user selected some text(non textarea nor input), jquery can call my callback to let me know which div's text is selected, and if the select focus is lost also call my callback?

Thanks.

like image 783
Bin Chen Avatar asked Dec 06 '10 14:12

Bin Chen


People also ask

Is there a select event in jQuery?

jQuery select() MethodThe select event occurs when a text is selected (marked) in a text area or a text field. The select() method triggers the select event, or attaches a function to run when a select event occurs.

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 I select something in jQuery?

The select() method is an inbuilt method in jQuery which is used when some letters or words are selected (or marked) in a text area or a text field. Syntax: $(selector). select(function);

How do I get inner text in jQuery?

Answer: Use the jQuery text() method You can simply use the jQuery text() method to get all the text content inside an element. The text() method also return the text content of child elements.


1 Answers

Somewhat surprisingly, there's no simple way to do this. IE has a select event that is implemented on all elements but other browsers have never extended this beyond inputs. You'll have to handle keyup and mouseup events on the whole document, and even then, your callback may well be called when the selection hasn't actually changed.


UPDATE 13 OCTOBER 2013

WebKit browsers have supported the selectionchange event on Document nodes for a couple of years. IE also supports this event back to version 5.5. Example:

document.onselectionchange = function() {
    console.log("Selection changed");
};

Here's a simple example:

function selectCallback(selectionParentElement) {
    console.log("Selecting, parent element is " + selectionParentElement.nodeName);
}

var mouseOrKeyUpHandler;

if (typeof window.getSelection != "undefined") {
    // Non-IE
    mouseOrKeyUpHandler = function() {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (range.toString()) {
                var selParentEl = range.commonAncestorContainer;
                if (selParentEl.nodeType == 3) {
                    selParentEl = selParentEl.parentNode;
                }
                selectCallback(selParentEl);
            }
        }
    };
} else if (typeof document.selection != "undefined") {
    // IE
    mouseOrKeyUpHandler = function() {
        var sel = document.selection;
        if (sel.type == "Text") {
            var textRange = sel.createRange();
            if (textRange.text != "") {
                selectCallback(textRange.parentElement());
            }
        }
    };
}

document.onmouseup = mouseOrKeyUpHandler;
document.onkeyup = mouseOrKeyUpHandler;
like image 64
Tim Down Avatar answered Sep 27 '22 16:09

Tim Down