Selected text event trigger in Javascript

There is a new experimental API that deals with this:

The selectionchange event of the Selection API is fired when the selection object of the document is modified, or when the selection associated with an <input> or a <textarea> changes. The selectionchange event is fired at the document in the first case, on the element in the second case.

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

Note that this is bleeding edge and not guaranteed to work across even major browsers.

I'm not sure about the mouse thing but this line works for mobile, this invoked every time a change made on the text selection -

document.addEventListener('selectionchange', () => {

});

When you press the mouse button down, the mousedown event is fired, when the mouse button is released, the mouseup and then click events are fired.

So we listen to the mouseup event and check if any text has been selected, and respective operations are performed.

const p = document.getElementById('interactiveText');

p.addEventListener('mouseup', (e) => {
  const selection = window.getSelection().toString();

  if (selection === '') {
    console.log('click');
  } else {
    console.log('selection', selection);
  }
});

var selectedText = "";

if (window.getSelection) {
    selectedText = window.getSelection();
}

if (document.getSelection) {
    selectedText = document.getSelection();
}

if (document.selection) {
    selectedText = document.selection.createRange().text;
}

function textSelector() {
   alert(selectedText);
}
textSelector();

There is a shortcut to get the selected text from event object.

event.currentTarget[event.currentTarget.selectedIndex].text

You can check it out on MDN. It's exactly what you need.

https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event

The event is trigger and return the selected text when the selection is done.

If you want the selected text on every time the selection change. There is the selectionchange event for document and html input and textarea. Selectionchange event for document is supported on most browsers but it is supported only on Firefox for html input and textarea elements.

There is a polyfill for that which will support for all browsers.

https://github.com/channyeintun/selection