เลือกข้อความ DIV ทั้งหมดด้วยการคลิกเมาส์เพียงครั้งเดียว

วิธีการเน้น / เลือกเนื้อหาของแท็ก DIV เมื่อผู้ใช้คลิกที่ DIV ... แนวคิดก็คือข้อความทั้งหมดจะถูกเน้น / เลือกดังนั้นผู้ใช้จึงไม่จำเป็นต้องไฮไลต์ข้อความด้วยเมาส์ด้วยตนเองและอาจ พลาดข้อความไปหน่อย?

ตัวอย่างเช่นสมมติว่าเรามี DIV ดังต่อไปนี้:

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

... และเมื่อผู้ใช้คลิกที่ URL ใด ๆ ข้อความ URL ทั้งหมดจะถูกไฮไลต์เพื่อให้สามารถลากข้อความที่เลือกไปรอบ ๆ ในเบราว์เซอร์ได้อย่างง่ายดายหรือคัดลอก URL ที่สมบูรณ์ด้วยการคลิกขวา

ขอบคุณ!

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>

ตอนนี้คุณต้องส่ง ID เป็นอาร์กิวเมนต์ซึ่งในกรณีนี้คือ "เลือกได้" แต่เป็นแบบสากลทำให้คุณสามารถใช้งานได้ทุกที่หลายครั้งโดยไม่ต้องใช้ตามที่ chiborg กล่าวไว้ jQuery

อัพเดท 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 tag เป็นต้น

ในการเลือกข้อความของ Node ตามคำถาม OP ที่คุณต้องเรียกแทน:

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

มีโซลูชัน 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 ที่ไม่ได้มาตรฐาน แต่เบราว์เซอร์รองรับได้ดี - ดูการค้นหา #

.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และเล่นได้ที่นี่ใน 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);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

สำหรับเนื้อหาที่แก้ไขได้ (ไม่ใช่อินพุตปกติคุณต้องใช้ 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)

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

เห็นได้ชัดว่ามีการรวมลิงก์ไปยังตัวอย่างข้อมูล

ฉันพบว่าการรวมฟังก์ชันนี้เป็นปลั๊กอิน 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

วิธีง่ายๆนี้เป็นอย่างไร? :)

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

แน่นอนว่ามันไม่ใช่โครงสร้าง Div อย่างที่คุณพูดถึง แต่ก็ยังใช้ได้สำหรับฉัน

Niko Lay: วิธีง่ายๆนี้ล่ะ? :)

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

ทำได้อย่างง่ายดายด้วยคุณสมบัติ css ที่ผู้ใช้เลือกตั้งค่าเป็นทั้งหมด แบบนี้:

div.anyClass {
  user-select: all;
}

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