Memilih teks dalam suatu elemen (mirip dengan menyorot dengan mouse Anda)

Saya ingin pengguna mengklik tautan, lalu memilih teks HTML di elemen lain ( bukan input).

Dengan "pilih" maksud saya dengan cara yang sama Anda akan memilih teks dengan menyeret mouse Anda ke atasnya. Ini menjadi tantangan untuk penelitian karena semua orang berbicara tentang "pilih" atau "sorot" dalam istilah lain.

Apakah ini mungkin? Kode saya sejauh ini:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) {
    $("#" + element).select();
}

Apakah saya melewatkan sesuatu yang sangat jelas?

Javascript biasa

function selectText(node) {
    node = document.getElementById(node);

    if (document.body.createTextRange) {
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Could not select text in node: Unsupported browser.");
    }
}

const clickable = document.querySelector('.click-me');
clickable.addEventListener('click', () => selectText('target'));

<div id="target"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click-me">Click me!</p>

Ini demo yang berfungsi . Bagi Anda yang mencari plugin jQuery, saya juga membuat salah satunya .

jQuery (jawaban asli)

Saya telah menemukan solusi untuk ini di utas ini . Saya dapat mengubah info yang diberikan dan mencampurnya dengan sedikit jQuery untuk membuat fungsi yang benar-benar luar biasa untuk memilih teks dalam elemen apa pun, apa pun browsernya:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

Ini adalah versi tanpa sniffing browser dan tidak bergantung pada jQuery:

function selectElementText(el, win) {
    win = win || window;
    var doc = win.document, sel, range;
    if (win.getSelection && doc.createRange) {
        sel = win.getSelection();
        range = doc.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
}

selectElementText(document.getElementById("someElement"));
selectElementText(elementInIframe, iframe.contentWindow);

Kode Jason tidak dapat digunakan untuk elemen di dalam iframe (karena ruang lingkup berbeda dari jendela dan dokumen). Saya memperbaiki masalah itu dan saya memodifikasinya agar dapat digunakan sebagai plugin jQuery lainnya (chainable):

Contoh 1: Pemilihan semua teks di dalam tag <code> dengan satu klik dan tambahkan kelas "terpilih":

$(function() {
    $("code").click(function() {
        $(this).selText().addClass("selected");
    });
});

Contoh 2: Klik tombol Pada, pilih elemen di dalam Iframe:

$(function() {
    $("button").click(function() {
        $("iframe").contents().find("#selectme").selText();
    });
});

Catatan: ingat bahwa sumber iframe harus berada di domain yang sama untuk mencegah kesalahan keamanan.

Plugin jQuery:

jQuery.fn.selText = function() {
    var obj = this[0];
    if ($.browser.msie) {
        var range = obj.offsetParent.createTextRange();
        range.moveToElementText(obj);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        var range = obj.ownerDocument.createRange();
        range.selectNodeContents(obj);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = obj.ownerDocument.defaultView.getSelection();
        selection.setBaseAndExtent(obj, 0, obj, 1);
    }
    return this;
}

Saya mengujinya di IE8, Firefox, Opera, Safari, Chrome (versi saat ini). Saya tidak yakin apakah itu berfungsi di versi IE yang lebih lama (dengan tulus saya tidak peduli).

Utas ini berisi hal-hal yang sangat luar biasa. Tapi saya tidak dapat melakukannya dengan benar di halaman ini menggunakan FF 3.5b99 + FireBug karena "Kesalahan Keamanan".

Yipee !! Saya dapat memilih bilah sisi kanan dengan kode ini semoga membantu Anda:

    var r = document.createRange();
    var w=document.getElementById("sidebar");  
    r.selectNodeContents(w);  
    var sel=window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(r); 

PS: - Saya tidak dapat menggunakan objek yang dikembalikan oleh pemilih jquery seperti

   var w=$("div.welovestackoverflow",$("div.sidebar"));

   //this throws **security exception**

   r.selectNodeContents(w);

Anda dapat menggunakan fungsi berikut untuk memilih konten dari elemen apa pun:

jQuery.fn.selectText = function(){
    this.find('input').each(function() {
        if($(this).prev().length == 0 || !$(this).prev().hasClass('p_copy')) { 
            $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
        }
        $(this).prev().html($(this).val());
    });
    var doc = document;
    var element = this[0];
    console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

Fungsi ini dapat disebut sebagai berikut:

$('#selectme').selectText();

Saya mencari hal yang sama, solusi saya adalah ini:

$('#el-id').focus().select();

Saya menyukai jawaban lepe kecuali untuk beberapa hal:

1. Peramban peramban, jQuery atau tidak, tidak optimal
2. KERING
3. Tidak berfungsi di IE8 jika orang tua obj tidak mendukung createTextRange
4. Kemampuan Chrome untuk menggunakan setBaseAndExtent harus ditingkatkan (IMO)
5. Tidak akan memilih rentang teks di beberapa elemen DOM (elemen dalam elemen "terpilih"). Dengan kata lain jika Anda memanggil selText pada div yang berisi beberapa elemen span, itu tidak akan memilih teks dari masing-masing elemen tersebut. Bagi saya, itu adalah pemecah kesepakatan, YMMV.

Inilah yang saya pikirkan, dengan anggukan ke jawaban lepe untuk inspirasi. Saya yakin saya akan diejek karena ini mungkin agak berat (dan sebenarnya bisa jadi lebih tapi saya ngelantur). Tapi itu berfungsi dan menghindari peramban browser dan itu intinya .

selectText:function(){

    var range,
        selection,
        obj = this[0],
        type = {
            func:'function',
            obj:'object'
        },
        // Convenience
        is = function(type, o){
            return typeof o === type;
        };

    if(is(type.obj, obj.ownerDocument)
        && is(type.obj, obj.ownerDocument.defaultView)
        && is(type.func, obj.ownerDocument.defaultView.getSelection)){

        selection = obj.ownerDocument.defaultView.getSelection();

        if(is(type.func, selection.setBaseAndExtent)){
            // Chrome, Safari - nice and easy
            selection.setBaseAndExtent(obj, 0, obj, $(obj).contents().size());
        }
        else if(is(type.func, obj.ownerDocument.createRange)){

            range = obj.ownerDocument.createRange();

            if(is(type.func, range.selectNodeContents)
                && is(type.func, selection.removeAllRanges)
                && is(type.func, selection.addRange)){
                // Mozilla
                range.selectNodeContents(obj);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    else if(is(type.obj, document.body) && is(type.obj, document.body.createTextRange)) {

        range = document.body.createTextRange();

        if(is(type.obj, range.moveToElementText) && is(type.obj, range.select)){
            // IE most likely
            range.moveToElementText(obj);
            range.select();
        }
    }

    // Chainable
    return this;
}

Itu dia. Beberapa yang Anda lihat adalah untuk keterbacaan dan / atau kenyamanan. Diuji pada Mac dalam versi terbaru Opera, Safari, Chrome, Firefox dan IE. Juga diuji di IE8. Juga saya biasanya hanya mendeklarasikan variabel jika / ketika diperlukan di dalam blok kode tetapi jslint menyarankan mereka semua dinyatakan di bagian atas. Ok jslint.

Sunting Saya lupa menyertakan cara mengikat ini ke kode op:

function SelectText(element) {
    $("#" + element).selectText();
}

Bersulang

Versi terbaru yang berfungsi di chrome:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);

    }
}

$(function() {
    $('p').click(function() {
        SelectText("selectme");

    });
});

http://jsfiddle.net/KcX6A/326/

Untuk setiap tag, seseorang dapat memilih semua teks di dalam tag itu dengan kode pendek dan sederhana ini. Ini akan menyorot seluruh area tag dengan warna kuning dan memilih teks di dalamnya dengan satu klik.

document.onclick = function(event) {
    var range, selection;
event.target.style.backgroundColor = 'yellow';
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(event.target);
        selection.removeAllRanges();
        selection.addRange(range);
};

lepe - Itu sangat bagus untuk saya, terima kasih! Saya meletakkan kode Anda dalam file plugin, kemudian menggunakannya bersamaan dengan setiap pernyataan sehingga Anda dapat memiliki beberapa tag pra dan beberapa tautan "Pilih semua" pada satu halaman dan mengambil pra yang benar untuk disorot:

<script type="text/javascript" src="../js/jquery.selecttext.js"></script>
<script type="text/javascript">
  $(document).ready(function() { 
        $(".selectText").each(function(indx) {
                $(this).click(function() {                 
                    $('pre').eq(indx).selText().addClass("selected");
                        return false;               
                    });
        });
  });

Lihat objek Seleksi (mesin Gecko) dan objek TextRange (mesin Trisula.) Saya tidak tahu tentang kerangka kerja JavaScript yang memiliki dukungan lintas-browser untuk ini diterapkan, tapi saya belum pernah mencarinya, jadi mungkin saja jQuery memilikinya.

Metode Tim berfungsi dengan baik untuk kasus saya - memilih teks dalam div untuk IE dan FF setelah saya mengganti pernyataan berikut:

range.moveToElementText(text);

dengan yang berikut ini:

range.moveToElementText(el);

Teks dalam div dipilih dengan mengkliknya dengan fungsi jQuery berikut:

$(function () {
    $("#divFoo").click(function () {
        selectElementText(document.getElementById("divFoo"));
    })
});

di sini adalah solusi sederhana lain untuk mendapatkan teks yang dipilih dalam bentuk string, Anda dapat menggunakan string ini dengan mudah untuk menambahkan anak elemen div ke dalam kode Anda:

var text = '';

if (window.getSelection) {
    text = window.getSelection();

} else if (document.getSelection) {
    text = document.getSelection();

} else if (document.selection) {
    text = document.selection.createRange().text;
}

text = text.toString();

Kasus penggunaan khusus saya adalah memilih rentang teks di dalam elemen rentang yang dapat diedit, yang sejauh yang dapat saya lihat, tidak dijelaskan dalam salah satu jawaban di sini.

Perbedaan utama adalah bahwa Anda harus meneruskan simpul tipe Textke Rangeobjek, seperti yang dijelaskan dalam dokumentasi Range.setStart () :

Jika startNode adalah Node bertipe Teks, Komentar, atau CDATASection , maka startOffset adalah jumlah karakter dari awal startNode. Untuk tipe Node lainnya, startOffset adalah jumlah node anak antara awal startNode.

The Textnode node anak pertama dari elemen span, sehingga untuk mendapatkannya, akses childNodes[0]dari elemen span. Sisanya sama dengan di sebagian besar jawaban lainnya.

Berikut contoh kode:

var startIndex = 1;
var endIndex = 5;
var element = document.getElementById("spanId");
var textNode = element.childNodes[0];

var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);

var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

Dokumentasi lain yang relevan:
Range
Selection
Document.createRange ()
Window.getSelection ()

Ditambahkan jQuery.browser.webkitke "else if" untuk Chrome. Tidak dapat mengaktifkan ini di Chrome 23.

Buat skrip ini di bawah ini untuk memilih konten dalam <pre>tag yang memiliki class="code".

jQuery( document ).ready(function() {
    jQuery('pre.code').attr('title', 'Click to select all');
    jQuery( '#divFoo' ).click( function() {
        var refNode = jQuery( this )[0];
        if ( jQuery.browser.msie ) {
            var range = document.body.createTextRange();
            range.moveToElementText( refNode );
            range.select();
        } else if ( jQuery.browser.mozilla || jQuery.browser.opera  || jQuery.browser.webkit ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            console.log(selection);
            var range = refNode.ownerDocument.createRange();
            range.selectNodeContents( refNode );
            selection.removeAllRanges();
            selection.addRange( range );
        } else if ( jQuery.browser.safari ) {
            var selection = refNode.ownerDocument.defaultView.getSelection();
            selection.setBaseAndExtent( refNode, 0, refNode, 1 );
        }
    } );
} );

Menurut dokumentasi jQuery dari select():

Picu acara pilih dari setiap elemen yang cocok. Hal ini menyebabkan semua fungsi yang telah terikat dengan acara pilih untuk dieksekusi, dan memanggil tindakan pilih default browser pada elemen yang cocok.

Ada penjelasan Anda mengapa jQuery select()tidak akan berfungsi dalam kasus ini.