单击鼠标选择所有 DIV 文本

小开

使用文本区域字段，您可以使用: (通过 Google)

<form name="select_all">


<textarea name="text_area" rows="10" cols="80"
onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">


Text Goes Here


</textarea>
</form>

这就是我看到的大多数网站的做法。他们只是用 CSS 设计它的样式，所以它看起来不像一个文本区。

小开

这个代码片段提供了您需要的功能。您需要做的是向该 div 添加一个事件，该事件将在其中激活 fnSelect。一个你完全不应该做或者可能不会起作用的快速入侵应该是这样的:

document.getElementById("selectable").onclick(function(){
fnSelect("selectable");
});

显然，假设已经包含了链接到代码段。

小开

最佳答案

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

<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

Now you have to pass the ID as an argument, which in this case is "selectable", but it's more global, allowing you to use it anywhere multiple times without using, as chiborg mentioned, jQuery.

小开

Neuroxik 的答案很有帮助。我只有一个问题与 Chrome，因为当我点击一个外部 div，它不工作。我可以在添加新的范围之前删除旧的范围:

function selectText(containerid) {
if (document.selection) {
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);
}
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

小开

我发现把这个函数包装成 jQuery 插件很有用:

$.fn.selectText = function () {
return $(this).each(function (index, el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
}
});
}

因此，它成为一个可重用的解决方案，然后你可以这样做:

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

它将在 div 中选择 test。

小开

2017年更新:

要选择节点的内容调用:

window.getSelection().selectAllChildren(
document.getElementById(id)
);

这适用于所有现代浏览器，包括 IE9 + (在标准模式下)。

可跑的例子:

function select(id) {
window.getSelection()
.selectAllChildren(
document.getElementById("target-div")
);
}

#outer-div  { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button      { margin: 1rem; }

<div id="outer-div">
<div id="target-div">
Some content for the
<br>Target DIV
</div>
</div>


<button onclick="select(id);">Click to SELECT Contents of #target-div</button>

下面的原始答案是过时的，因为 window.getSelection().addRange(range); 已经被否决了

原答案:

上面的所有例子都使用:

    var range = document.createRange();
range.selectNode( ... );

但问题是它选择了 Node 本身，包括 DIV 标记等。

要根据 OP 问题选择 Node 的文本，您需要改为调用:

    range.selectNodeContents( ... )

因此，完整的片段应该是:

    function selectText( containerid ) {


var node = document.getElementById( containerid );


if ( document.selection ) {
var range = document.body.createTextRange();
range.moveToElementText( node  );
range.select();
} else if ( window.getSelection ) {
var range = document.createRange();
range.selectNodeContents( node );
window.getSelection().removeAllRanges();
window.getSelection().addRange( range );
}
}

小开

$.fn.selectText = function () {
return $(this).each(function (index, el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
}
});
}

以上答案在 Chrome 中不起作用，因为 addRange 删除了以前添加的范围。我没有找到任何解决方案，除了虚假的选择与 CSS。

小开

这个简单的解决方案怎么样? :)

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

当然不是像你提到的那样分层结构，但是对我来说还是很有效的。

小开

对于内容可编辑的内容(不是常规输入，需要使用 selectNodeContent (而不仅仅是 selectNode))。

注意: 所有对“ document.select”和“ createTextRange ()”的引用都适用于 IE 8或更低版本... ... 如果您尝试执行这样复杂的操作，那么您不太可能需要支持那个怪物。

function selectElemText(elem) {


//Create a range (a range is a like the selection but invisible)
var range = document.createRange();


// Select the entire contents of the element
range.selectNodeContents(elem);


// Don't select, just positioning caret:
// In front
// range.collapse();
// Behind:
// range.collapse(false);


// Get the selection object
var selection = window.getSelection();


// Remove any current selections
selection.removeAllRanges();


// Make the range you have just created the visible selection
selection.addRange(range);


}

小开

尼科 · 雷: 这个简单的解决方案怎么样? :)

`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`

.....

编码前:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">

之后的代码:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">

在我的代码中，只有这一部分 onclick = “ this. select () ;”id = “ selectable”工作得很好。在我的代码框中单击鼠标即可选择所有内容。

谢谢你帮助 Niko Lay！

小开

有一个纯粹的 CSS4解决方案:

.selectable{
-webkit-touch-callout: all; /* iOS Safari */
-webkit-user-select: all; /* Safari */
-khtml-user-select: all; /* Konqueror HTML */
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* Internet Explorer/Edge */
user-select: all; /* Chrome and Opera */


}

user-select是 CSS 模块 Level 4规范，目前是一个草案和非标准的 CSS 属性，但浏览器很好地支持它ーー参见 # search = user-select。

.selectable{
-webkit-touch-callout: all; /* iOS Safari */
-webkit-user-select: all; /* Safari */
-khtml-user-select: all; /* Konqueror HTML */
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* Internet Explorer/Edge */
user-select: all; /* Chrome and Opera */


}

<div class="selectable">
click and all this will be selected
</div>

阅读更多关于用户选择这里是 MDN和发挥它的在 W3学校

小开

使用 css 属性很容易实现，用户选择设置为所有。像这样:

div.anyClass {
user-select: all;
}

小开

export const selectText = (containerId) => {
let selection = window.getSelection()
let myElement = document.getElementById(containerId)


if (selection.rangeCount > 0) {
selection.removeAllRanges()
}


let range = document.createRange()
range.selectNode(myElement)
selection.addRange(range)
}**The most simplest answer works in all browsers**

小开

试试这个，altn 添加到 oncontextmenu 将快速访问允许这种方式输入的扩展。

<div onclick='window.getSelection().selectAllChildren(this)' id="selectable">http://example.com/page.htm</div>

小开

一个解决方案，也可以在元素是 iframe 的一部分的情况下使用

element.ownerDocument?.getSelection()?.selectAllChildren(element);