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

SEE CODEPEN EXAMPLE HERE

可以使用 HTML ， CSS 和 Vanilla JavaScript 来完成此操作（我宁可不使用 ~~JQUERY~~ ）？
如果可以的话，请问您能获得有关有用信息的som资源，这些信息可以帮助我进行实施吗？

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

<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>

方法2：

JavaScript方式：（Div或btn单击||悬停）

实时演示

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>

这应该有效

我可以在JavaScript中模拟文本选择吗？

2 个答案:

方法1

方法2：