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);}

Answer 1

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());
        });
    });
});​

Answer 2

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.