Can I simulate text selection in JavaScript?

Question

I would like to emit a mouse-event that selects all text within a "rectangle".
Example:
     Select all text from (x₁, y₁) to (x₂, y₂)

(x₂, y₂) _ _ _ _ _ _ (x₁, y₂)
            |                 |
            |    Text    |
            |                 |
(x₂, y₁) _ _ _ _ _ _ (x₁, y₁)

What I have tried so far:
     My approach was to:
             Emit the mousedown and mousemove events simultaneously/asynchronously.
             My thought: "Moving the mouse when it is down/pressed is equivalent to selecting text".

However, this doesn't seem to work, I have tried using the mosedown and mosemove events asynchronously (simultaneously), see my code below:

HTML

<div id="bdy">
<button id="btn">
    hello
</button>
<div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Omnis, eaque amet! Aspernatur, voluptatum odit! Exercitationem
    et debitis voluptatem. Atque quam animi sint asperiores cupiditate
    laudantium aspernatur. Placeat quod sit ea.
</div>
</div>

CSS

body{
    width: 100vw;
    height: 100vh;
}

JS

let mouseDownEvent = new MouseEvent("mousedown", {
    clientX: 10,
    clientY: 10,
});

let mouseMoveEvent = new MouseEvent("mousemove", {
    clientX: 20,
    clientY: 20,
});

document.getElementById("bdy").addEventListener("mousedown", ()=>{
    console.log("hello");
})

document.getElementById("bdy").addEventListener("mousemove", (e)=>{
    console.log(e.clientX);
    console.log(e.clientY);
})
async function g(){
document.getElementById("bdy").dispatchEvent(mouseDownEvent)
}
async function h(){
document.getElementById("bdy").dispatchEvent(mouseMoveEvent)
}

g();
h();

SEE CODEPEN EXAMPLE HERE

Can this be done with HTML, CSS and Vanilla JavaScript (I'll rather not use JQUERY)?
If this is possible, could I please get som resources on useful information that can help me with the implementation?

Answer 1

Method 1

It's the css user-select property, and it works like this:

        .force-select-all {
           -webkit-user-select: all;
           -moz-user-select: all;
           -ms-user-select: all;
            user-select: all;
        }

Live demo

@import 'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700';

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family: 'Source Code Pro', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
}
.area {
  background: white;
  padding: 20px;
}
pre, code {
  font-family: 'Space Mono', monospace;
}
pre {
  user-select: all;
  margin: 0;
  padding: 10px 0;
  white-space: pre-wrap;
}
/* 

Probably don't do this... as the auto-selecting behavior is weird enough, a different selection color might make the user not understand what's happening at all.

pre::selection {
  background: yellow;
}
*/
p span {
  font-size: 0.8rem;
  background: #fff9c2;
  padding: 2px 5px;
}
h1 span {
  font-size: 1.0rem;
  display: block;
}
code {
  color: darkorange;
}
h1 {
  margin: 0 0 15px 0;
}
p {
  margin: 0 0 25px 0;
}

<div class="area">
  
  <h1>
    <span>Demo of <code>user-select: all;</code></span>
    SVG Shape Cheatsheet
</h1>
  <p><span>Click line to select all, in supporting browsers.</span></p>
  <pre>&lt;line x1="0" y1="0" x2="10" y2="10" stroke="black">&lt;/line></pre>
  <pre>&lt;rect x="0" y="0" width="10" height="10">&lt;/rect></pre>
  <pre>&lt;circle cx="5" cy="5" r="5">&lt;/circle></pre>
  <pre>&lt;ellipse cx="10" cy="5" rx="10" ry="5">&lt;/ellipse></pre>
  <pre>&lt;polygon points="0,0 10,5 20,0 20,20 10,15 0,20">&lt;/polygon></pre>
  <pre>&lt;polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black">&lt;/polyline></pre>
  <pre>&lt;path d="M65,10 a50,25 0 1,0 50,25">&lt;/path></pre>  
</div>

Method 2:

JavaScript Way: (Div or btn click || hover)

Live demo

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

body{
    width: 100vw;
    height: 100vh;
}

#content {
  margin: 20px;
  padding: 2px;
  background: #e5fcd9;
}

#content::before {
  content: "";
}

<div id="bdy">
<button id="btn" onclick="selectText('content')">
    hello click me
</button>
<button id="btn" onmouseover="selectText('content')">
     hover me
</button>
<p>selectable rectangle:</p>
<div id="content" onclick="selectText('content')">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Omnis, eaque amet! Aspernatur, voluptatum odit! Exercitationem
    et debitis voluptatem. Atque quam animi sint asperiores cupiditate
    laudantium aspernatur. Placeat quod sit ea.
</div>
    Here out of your selectable rectangle! Does not auto select.
</div>

Answer 2

Try this :

<div id="bdy" onmouseover="yourFunction(this)">
</div>

This should work