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?
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
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
If you want to select inside form elements. Use .focus() /.blur()
and .val()
functions.
$('input').focus(); //focus on input element
$('input').val(); //return the value of input
Not really. In most browsers it's not possible for the contents of more than one input to be selected at once. See http://jsfiddle.net/timdown/D5sRE/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.