Можно ли имитировать выделение текста в JavaScript?

Question

Я хотел бы выдать событие мыши , которое выделяет весь текст в пределах " прямоугольник ".
Пример:
Выбрать всетекст от (x ₁ , y ₁ ) до (x ₂ , y ₂ )

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

То, что я пробовал до сих пор:
Мой подход заключался в следующем:
Одновременно / асинхронно генерировать события mousedown и mousemove.
Моя мысль: «Перемещение мыши, когда она нажата / нажата, эквивалентно выделению текста».

Однако, похоже, это не работает, я попытался использовать события mosedown и mosemove асинхронно (одновременно),см. мой код ниже:

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

СМОТРИТЕ КОДЕЗНЫЙ ПРИМЕР ЗДЕСЬ

Можно ли это сделать с помощью HTML , CSS и Vanilla JavaScript (я скорее не буду использовать JQUERY )?
Если это возможно, могу ли я получить сом-ресурсы по полезной информации, которая может помочь мне с реализацией?

Answer 1

Метод 1

Это свойство css user-select , которое работает следующим образом:

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

Демонстрационная версия

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

  
  
    Demo of user-select: all;
    SVG Shape Cheatsheet

  Click line to select all, in supporting browsers.
  <line x1="0" y1="0" x2="10" y2="10" stroke="black"></line>

<rect x="0" y="0" width="10" height="10"></rect>

<circle cx="5" cy="5" r="5"></circle>

<ellipse cx="10" cy="5" rx="10" ry="5"></ellipse>

<polygon points="0,0 10,5 20,0 20,20 10,15 0,20"></polygon>

<polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black"></polyline>

<path d="M65,10 a50,25 0 1,0 50,25"></path>

Метод 2:

JavaScript Way: (Div или btn click || hover)

Live демо

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

Попробуйте это:

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

Это должно работать