Get Selected Text In ContentEditable DIV?

Question

So I have a contenteditable div in my Rails app, and need to be able to display a little popup above text when it's highlighted. Currently I have code that works, and it displays the highlighted text in an alert. However, the function executes on mouseup, so when you click into the div to start typing or highlighting, it throws an empty alert.

Here's my code:

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
}

$("#content-create-partial").bind("mouseup", function () {
    var text = getSelected();
    if (text) {
        console.log(text);
    } else {
        console.log("Nothing selected?");
    }
});

How do I prevent jQuery from executing the function when the user clicks into the contentEditable div? I only want it to execute when actual text is highlighted.

score 6 · Answer 1 · answered Aug 06 '16 at 13:10

6

You can compare window.getSelection().anchorOffset and window.getSelection().extentOffset to see if they are equal. If they are, then it was just a normal click.

answered Aug 06 '16 at 13:10

Tarun Dugar

8,921
8
42
79

score 5 · Answer 2 · answered Jul 26 '18 at 07:42

5

Try this

window.getSelection().anchorNode.data.substring( window.getSelection().anchorOffset,window.getSelection().extentOffset )

Try Working Exmaple Here.

answered Jul 26 '18 at 07:42

Training at Manorama

177
2
10

score 3 · Answer 3 · edited Jun 17 '17 at 05:00

3

The following will return true if nothing is selected.

Inspired from @Tarun Dugar. But didn't work in all browsers. The following worked.

window.getSelection().focusOffset == window.getSelection().anchorOffset;

edited Jun 17 '17 at 05:00

Pang

9,564
146
81
122

answered Jun 02 '17 at 12:32

score 3 · Answer 4 · answered May 17 '18 at 22:29

3

You can simply check if the Selection.toString() method returns an empty string

if(window.getSelection().toString()){
    // do something
}

answered May 17 '18 at 22:29

Mendy

7,612
5
28
42

score 0 · Answer 5 · edited May 23 '17 at 12:30

0

There is "selectstart" event which fires when user starts selection. There is no selection end event but you can listen for mouseup event after "selectstart" event fired to make sure selection has occurred.

Edit:

Check - HTML Content Editable div: select text event

edited May 23 '17 at 12:30

Community

1
1

answered Jun 12 '14 at 05:45

DexTer

2,043
1
22
45

score -2 · Answer 6 · edited Jun 12 '14 at 05:33

-2

Just check if the selection is empty: if ($.trim( text) != '') ...

edited Jun 12 '14 at 05:33

Bhushan Kawadkar

28,279
5
35
57

answered Aug 26 '13 at 04:55

hammett

705
4
13

Get Selected Text In ContentEditable DIV?

6 Answers6

Linked