Use jQuery select() to select contents of a div

Question

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?

Solution 1

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

Solution 2

If you want to select the input elements together with every thing.

Here is a jQuery mixed, JS solution

function selectElement(element) {
    if (window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        var range = document.createRange();
        range.selectNodeContents(element);
        sel.addRange(range);
    } else if (document.selection) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(element);
        textRange.select();
    }
}

selectElement($("div")[0]); //Select the div
$("input").trigger("select");  //select the inputs

Demo

Comments

[Starx]

Is it meant to be or, your demo doesn't select even one box

[Bob-ob]

this works a treat, great work! I have had to adapt it a little bit and made it tidier by setting the opacity of the prepended elements to be 0. Otherwise, the process is far from seamless :)

[Bob-ob]

I know, this is the issue I came across while trying to come up with a solution. What I find really annoying is that when you copy all elements on your interface or go to select all elements on your interface/html page it selects the frame of the html input, but not the contents, although it gives the illusion that the contents have been highlighted also. Native issue which probably will come up so rarely that it will never be dealt with however.

[Tim Down]

@Starx: In which browser? It selects the contents of the second box in my Windows Chrome and Firefox.

[Admin]

only if and else if part is necessary