Tek bir tıklama ile tüm DIV metnini seçin

Kullanıcı DIV'yi tıkladığında bir DIV etiketinin içeriği nasıl vurgulanır / seçilir ... fikir, metnin tümünün vurgulandığı / seçildiği ve böylece kullanıcının metni fare ile manuel olarak vurgulaması gerekmeyeceği ve potansiyel olarak metnin bir kısmını özlüyor musun?

Örneğin, aşağıdaki gibi bir DIV'miz olduğunu varsayalım:

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

... ve kullanıcı bu URL'nin herhangi birini tıkladığında, seçili metni tarayıcıda kolayca sürükleyebilmeleri veya tüm URL'yi sağ tıklamayla kopyalayabilmeleri için tüm URL metni vurgulanır.

Teşekkürler!

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>

Şimdi kimliği bir argüman olarak geçmelisiniz, bu durumda "seçilebilir", ancak daha küreseldir, chiborg'un belirttiği gibi jQuery'i kullanmadan herhangi bir yerde birden çok kez kullanmanıza izin verir.

GÜNCELLEME 2017:

Düğümün içindekileri seçmek için:

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

Bu, IE9 + dahil tüm modern tarayıcılarda çalışır (standartlar modunda).

Çalıştırılabilir Örnek:

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>

Aşağıdaki orijinal yanıt window.getSelection().addRange(range); kullanımdan kaldırıldığı için kullanılmıyor

Orijinal Yanıt:

Yukarıdaki örneklerin tümü şunları kullanır:

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

ancak bununla ilgili sorun DIV etiketi vb.Dahil olmak üzere Düğümün kendisini seçmesidir.

Düğümün metnini OP sorusuna göre seçmek için aramanız gerekir:

    range.selectNodeContents( ... )

Tam pasaj şöyle olur:

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

Saf CSS4 çözümü var:

.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şu anda taslak ve standart olmayan bir CSS özelliği olan bir CSS Modül Seviye 4 spesifikasyonudur, ancak tarayıcılar bunu iyi destekler - bkz. # search = user-select .

Daha okuyun kullanıcı seçmek MDN'yi burada ve onunla oynamak w3scools burada

Neuroxik'in cevabı gerçekten yardımcı oldu. Yalnızca Chrome ile ilgili bir sorunum vardı, çünkü harici bir div'ı tıkladığımda işe yaramadı. Yeni aralığı eklemeden önce eski aralıkları kaldırarak çözebilirim:

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>

İçerik düzenlenebilir şeyler için (normal girişler değil), selectNodeContents (yalnızca selectNode yerine) kullanmanız gerekir.

NOT: "document.selection" ve "createTextRange ()" için tüm referanslar IE 8 ve daha düşük sürümler içindir ... Böyle zor şeyler yapmaya çalışıyorsanız, bu canavarı desteklemeniz gerekmeyecektir.

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

}

Bir metin alanı alanı kullanarak şunları kullanabilirsiniz: (Google ile)

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

Çoğu web sitesinin bunu yaptığını görüyorum. Sadece CSS ile şekillendiriyorlar, bu yüzden bir metin alanına benzemiyor.

Bu pasaj, ihtiyacınız olan işlevselliği sağlar . Yapmanız gereken, bu div'e içinde fnSelect'i etkinleştiren bir olay eklemektir. Tamamen yapmamanız ve muhtemelen çalışmamanız gereken hızlı bir kesmek şöyle görünecektir:

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

Açıkça, snippet ile bağlantılı olduğunu varsaymak.

Bu işlevi bir jQuery eklentisi olarak sarmak için yararlı buldum:

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

Böylece, yeniden kullanılabilir bir çözüm haline gelir. Sonra bunu yapabilirsiniz:

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

Ve div test seçecektir.

Bu basit çözüme ne dersiniz? :)

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

Tabii ki bahsettiğiniz gibi div-inşaat değil, ama yine de benim için çalıştı.

Niko Lay: Bu basit çözüme ne dersiniz? :)

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

.....

Önceki kod:

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

Kodlama tarihi:

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

Sadece bu kısım onclick = "this.select ();" Kodumda id = "seçilebilir" iyi çalıştı. Tek bir tıklama ile kod kutumdaki her şeyi seçer.

Yardımınız için teşekkürler 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);
        }
    });
}

Yukarıdaki yanıt Chrome'da çalışmıyor çünkü addRange önceki eklenen aralığı kaldırıyor. Ben css ile sahte seçim yanında bunun için herhangi bir çözüm bulamadık.

Tüm kullanıcılara özel ayarlanmış css özelliği ile kolayca elde edilir. Bunun gibi:

div.anyClass {
  user-select: all;
}