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
