单击鼠标即可选择所有DIV文本

有纯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模块4级规范,目前是草案和非标准CSS属性,但浏览器支持它很好 - 请参阅caniuse.com/#feat=user-select.

在MDN上阅读更多用户选择,并在w3scools中播放

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);
    }
}
http://example.com/page.htm

对于内容可编辑的东西(不是常规输入,您需要使用selectNodeContents(而不仅仅是selectNode).

注意:所有对"document.selection"和"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);

}

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

    
    Text Goes Here 

    

这就是我看到大多数网站都这样做的方式.他们只是用CSS设计它,所以看起来不像textarea.

此代码段提供了您需要的功能.您需要做的是向该div添加一个事件,该事件激活其中的fnSelect.一个你完全不应该做而且可能不会工作的快速黑客,看起来像这样:

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

显然假设已包含链接到代码段.

我发现将此函数包装为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);
        }
    });
}

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

http://example.com/page.htm

它将在div中选择测试.