April 2, 2012

Use jQuery select() to select contents of a div

Question by Conor Higgins

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?

Answer by techfoobar

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.

Answer by Starx

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

...

Please fill the form - I will response as fast as I can!