Question

195

Use jQuery select() to select contents of a div

rated 0 times [ 199] [ 4] / answers: 1 / hits: 40074 / 12 Years ago, mon, april 2, 2012, 12:00:00

Is it possible to use or adapt jQuery's .select() to set a selection range on the entire contents of a div?

I have a div which has a series of labels, inputs, select objects and a couple of other UI elements. I have found code on a separate StackOverflow post with some code hosted on jsFiddle: http://jsfiddle.net/KcX6A/570/

Can this be adapted to select the value of inputs also? Or how would you suggest I go about this?

Thanks,
Conor

Edit: More info

I know how to get the value of inputs using jQuery, that is easy, I also know how to select he values of independent elements using .select().

In my div I have a series of different element types including inputs, labels, selects, etc. I need an overall selection of all elements. The jsFiddle link I added earlier shows how to set the range of a div and select the text of elements like p tags etc. What I need is to set the range of the div's contents and when I hit ctrl+c or cmd+c it copies the values of the inputs as well as the labels.

So to summarise, using .val and .select won't work for this I don't think. I need to combine the above in some way but not sure exactly how this will be accomplished. Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anabellejaynav

Add To Favorites

Follow

Total Points: 176

Total Questions: 105

Total Answers: 105

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

answered 12 Years ago malkajillc · Accepted Answer

Check this fiddle: http://jsfiddle.net/JAq2e/

Basically the trick is to introduce a hidden text node whose content will be included in the selection when copied.

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

    }

};

And use it like:

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

You can couple the above plugin with an event handler if you want to create selection links :

Code :

$('.select-text').on('click', function(e) {

    var selector = $(this).data('selector');

    $(selector).selectText();

    e.preventDefault();

});

Usage :

<a href=# class=select-text data-selector=#some-container>Select all</a>

<div id=some-container>some text</div>

Demo : see js fiddle