جافاسكريبت - تحديد كل نصوص DIV بنقرة واحدة بالماوس

كيفية تمييز/اختيار محتويات وسم DIV عندما ينقر المستخدم على الـ DIV... الفكرة هي أن يتم تمييز/اختيار كل النص بحيث لا يحتاج المستخدم إلى تمييز النص يدويًا باستخدام الفأرة وربما يفوته جزء من النص؟

على سبيل المثال، لنفرض أن لدينا عنصر DIV كما يلي:

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

...وعندما ينقر المستخدم على أي من تلك الروابط، يتم تمييز نص الرابط بأكمله حتى يتمكنوا من سحب النص المحدد بسهولة داخل المتصفح، أو نسخ الرابط الكامل بالنقر بزر الماوس الأيمن.

شكراً!

الإجابة رقم 1

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>

الآن يجب عليك تمرير المعرف كوسيطة، والذي في هذه الحالة هو "selectable"، لكنه أكثر شمولية، مما يتيح لك استخدامه في أي مكان عدة مرات دون استخدام، كما ذكر تشيبورغ، jQuery.

الإجابة رقم 2

تحديث 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( ... );

لكن المشكلة في ذلك هي أنه يختار العقدة نفسها بما في ذلك وسم DIV وما إلى ذلك.

لاختيار نص العقدة وفقًا لسؤال الموضوع الأصلي، تحتاج إلى استدعاء ما يلي:

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

الإجابة رقم 3

هناك حل باستخدام 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 غير قياسية، لكن المتصفحات تدعمها جيداً — انظر #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 وجربه هنا في w3schools

الإجابة رقم 4

كان رد 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>

الإجابة رقم 5

لأشياء قابلة لتحرير المحتوى (وليس الإدخالات العادية، تحتاج إلى استخدام selectNodeContents (بدلاً من مجرد selectNode).

ملاحظة: جميع الإشارات إلى "document.selection" و"createTextRange()" هي لإنترنت إكسبلورر 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);

}