HTML Content Editable div: select text event

Question

I have a div which is contenteditable

<div class="editable" contenteditable="true"></div>

The user can enter any content in there. Is there any way to get the event for when a user makes a selection within the div.

Something like:

$('.editable').onSelection(function(e, selection){alert(selection);}

possible duplicate of [Selected text event trigger in Javascript](http://stackoverflow.com/questions/3545018/selected-text-event-trigger-in-javascript) `:)` might help! — Tats_innit, Nov 08 '12 at 09:16
@Tats_innit thanks for the pointer. But http://stackoverflow.com/a/11786495/1008421 kind of solves the problem. But I would like to if there is some other better way to do this — unni, Nov 08 '12 at 09:31

Elliott · Answer 1 · 2020-02-10T10:23:31.263

13

you could try something like this:

There is no 'selectend' event but we can work out when the user has finished selecting by watching the mouseup event

$(function () {
    $('.editable').on('selectstart', function () {
        $(document).one('mouseup', function() {
            alert(this.getSelection());
        });
    });
});

edited Feb 10 '20 at 10:23

answered Nov 08 '12 at 10:14

Elliott

2,669
2
23
33

5

You might also want to add `keyup` in the same event handler as `mouseup` so that selecting text with the keyboard also works – Michael Bates Apr 08 '14 at 10:25

score 1 · Answer 2 · answered Feb 09 '21 at 18:42

Following the answer by @Elliot and the comment by @Michael Bates, this seems to work flawlessly for both mouse and keyboard selection events (example is in TypeScript):

export function attachSelectionListener(element: HTMLElement) : void {
  if (!element.contentEditable) {
    return;
  }
  element.onselectstart = () => handleSelectionChange(element);
}

function handleSelectionChange(element: HTMLElement): void {
  document.onmouseup = () => retrieveSelection(element);
  document.onkeyup = () => retrieveSelection(element);
}

function retrieveSelection(element: HTMLElement) : void {
  const selection = document.getSelection();

  // Ignore empty selection
  if (!selection || !selection.toString()) {
    return;
  }
  alert(selection.toString());
}

When using this in your app, you probably want to check if you need to remove the listeners again at some point.

You'll probably want to use `addEventListener()`, because assigning `element.on{event} =` could remove another event. If a user is unaware that `attachSelectionListener()` sets `onselectstart`, `onmouseup`, and `onkeyup` they might even overwrite the listener themself by accident. — 3limin4t0r, Jun 24 '22 at 14:36

score -2 · Answer 3 · answered Nov 08 '12 at 10:05

$('#ta').select(function() {
alert('Handler for .select() called.');
});

.select( handler(eventObject) ) Returns: jQuery Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

.select( handler(eventObject) ) handler(eventObject)A function to execute each time the event is triggered.

.select( [eventData], handler(eventObject) ) eventDataA map of data that will be passed to the event handler. handler(eventObject)A function to execute each time the event is triggered.

check link

on.select does not fire for contenteditable. ref: "This event is limited to fields and boxes." — nevf, Mar 20 '14 at 04:02

HTML Content Editable div: select text event

3 Answers3

Linked