Chọn tất cả văn bản DIV với một lần nhấp chuột

Cách tô sáng / chọn nội dung của thẻ DIV khi người dùng nhấp vào DIV ... ý tưởng là tất cả văn bản được tô sáng / chọn để người dùng không cần làm nổi bật văn bản bằng chuột và có khả năng bỏ lỡ một chút của văn bản?

Ví dụ: giả sử chúng tôi có DIV như sau:

<div id="selectable">http://example.com/page.htm</div>

... và khi người dùng nhấp vào bất kỳ URL nào, toàn bộ văn bản URL được tô sáng để họ có thể dễ dàng kéo văn bản đã chọn xung quanh trong trình duyệt hoặc sao chép URL hoàn chỉnh bằng một cú nhấp chuột phải.

Cảm ơn!

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>

Bây giờ bạn phải truyền ID làm đối số, trong trường hợp này là "có thể chọn", nhưng nó toàn cầu hơn, cho phép bạn sử dụng nó ở bất cứ đâu nhiều lần mà không cần sử dụng, như chiborg đã đề cập, jQuery.

CẬP NHẬT 2017:

Để chọn nội dung của nút gọi:

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

Điều này hoạt động trên tất cả các trình duyệt hiện đại bao gồm IE9 + (ở chế độ tiêu chuẩn).

Ví dụ runnable:

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>

Câu trả lời ban đầu dưới đây đã lỗi thời vì window.getSelection().addRange(range); đã bị phản đối

Câu trả lời gốc:

Tất cả các ví dụ trên sử dụng:

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

nhưng vấn đề với điều đó là nó tự chọn Node bao gồm thẻ DIV, v.v.

Để chọn văn bản của Nút theo câu hỏi OP, bạn cần gọi thay thế:

    range.selectNodeContents( ... )

Vì vậy, đoạn trích đầy đủ sẽ là:

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

Có giải pháp CSS4 thuần túy:

.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-selectlà một đặc tả CSS Module Cấp 4, hiện là thuộc tính CSS dự thảo và không chuẩn, nhưng các trình duyệt hỗ trợ tốt - xem # search = user-select .

Đọc thêm về người dùng chọn ở đây trên MDN và chơi với nó ở đây trong w3scools

Câu trả lời của Neuroxik thực sự hữu ích. Tôi chỉ gặp rắc rối với Chrome, vì khi tôi nhấp vào div bên ngoài, Nó không hoạt động. Tôi có thể giải quyết nó loại bỏ các phạm vi cũ trước khi thêm phạm vi mới:

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>

Đối với nội dung có thể chỉnh sửa nội dung (không phải đầu vào thông thường, bạn cần sử dụng selectNodeContents (thay vì chỉ selectNode).

LƯU Ý: Tất cả các tham chiếu đến "document.selection" và "createTextRange ()" đều dành cho IE 8 trở xuống ... Bạn sẽ không cần phải hỗ trợ con quái vật đó nếu bạn đang cố gắng làm những việc khó khăn như thế này.

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

}

Sử dụng trường vùng văn bản, bạn có thể sử dụng trường này: (Qua 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>

Đây là cách tôi thấy hầu hết các trang web làm điều đó. Họ chỉ tạo kiểu cho nó bằng CSS để nó không giống như một văn bản.

Đoạn mã này cung cấp các chức năng bạn yêu cầu . Những gì bạn cần làm là thêm một sự kiện vào div kích hoạt fnSelect trong đó. Một cách hack nhanh mà bạn hoàn toàn không nên làm và có thể không hoạt động, sẽ như thế này:

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

Rõ ràng giả định rằng các liên kết đến đoạn trích đã được bao gồm.

Tôi thấy hữu ích khi gói chức năng này như một plugin 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);
        }
    });
}

Vì vậy, nó trở thành một giải pháp tái sử dụng. Sau đó, bạn có thể làm điều này:

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

Và nó sẽ chọn thử nghiệm trong div.

Làm thế nào về giải pháp đơn giản này? :)

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

Chắc chắn nó không phải là div-xây dựng, như bạn đã đề cập, nhưng nó vẫn hoạt động với tôi.

Niko Lay: Làm thế nào về giải pháp đơn giản này? :)

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

.....

Mã trước:

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

Mã sau:

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

Chỉ phần này onclick = "this.select ();" id = "selectable" trong mã của tôi hoạt động tốt. Chọn tất cả trong hộp mã của tôi với một cú nhấp chuột.

Cảm ơn đã giúp Niko Lay!

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

Câu trả lời trên không hoạt động trong Chrome vì addRange xóa phạm vi đã thêm trước đó. Tôi không tìm thấy bất kỳ giải pháp nào cho việc này bên cạnh lựa chọn giả với css.

Dễ dàng đạt được với thuộc tính css do người dùng chọn được đặt thành tất cả. Như thế này:

div.anyClass {
  user-select: all;
}