What is the selectstart DOM event with examples and howto's in Javascript?

Devtool Chrome Event Listener

About

selectstart 1) is a selection event that occurs when the user agent (the browser used by the user mostly) is about to associate a new range to a selection object

Note that when the user clicks on:

  • a text, the selection will start.
  • a button, the selection will not start

Demo

Basic

<ul>
  <li>Select this text, one letter at a time to see the <marK>selectstart</mark> event usage</li>
  <li>Click on this text and see the event firing</li>
  <li>Click on this <button>Button</button>. It does not work.</li>
</ul>
document.addEventListener('selectstart',()=>{
  console.log('Selection has started')
})

Force the text selected

As a demonstration purpose, we will force the selection of a whole section when the user tries to select only one word.

This example could also be made with the CSS property user-select

<section id="constrained-section">
   <h1>You can select only the whole section</h1>
   <p>In this section, you can only select the whole text of the section</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="not-constrained">
   <h1>You can select any text in this section</h1>
   <p>In this section, you can select any text you want.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
  • The callback function that is fired with the event selectstart that:
    • define a range being the start of the h1 and the last character of the p text node
    • and update the selection object
let handleExpandSelectionToContainer = function(event) {
    // Set the range
    var range = document.createRange();
    var parent = this; // the section
    var h1TextNode = parent.firstElementChild.firstChild;
    var pTextNode = parent.lastElementChild.firstChild;
    range.setStart(h1TextNode, 0);
    range.setEnd(pTextNode, pTextNode.length);
    // Set the selection
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    // prevent
    event.preventDefault();
}
  • This code attach the callback function to the selectstart event.
var parent = document.getElementById("constrained-section");
parent.addEventListener('selectstart', handleExpandSelectionToContainer );
  • Result: Try to select only one word. You will only select the whole text





Discover More
Browser
How to select text dynamically in a Browser with Javascript? The window Selection Object explained

How to manipulate the selection made by a mouse or with the keyboard in a browser
Devtool Chrome Event Listener
Select Events (selectstart, selection change)

This page is the events that are fired when a selection of text occurs The select event occurs when a user selects some text in form controls when their text selection is adjusted (whether by an...



Share this page:
Follow us:
Task Runner