使用jQuery select()选择div的内容 [英] Use jQuery select() to select contents of a div
问题描述
是否可以使用或调整jQuery的.select()来设置div的整个内容的选择范围?
Is it possible to use or adapt jQuery's .select() to set a selection range on the entire contents of a div?
我有一个div有一个div一系列标签,输入,选择对象和一些其他UI元素。我在一个单独的StackOverflow帖子上找到了代码,其中一些代码托管在jsFiddle上: http://jsfiddle.net/KcX6A/ 570 /
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?
谢谢,
Conor
Thanks, Conor
编辑:更多信息
我知道如何使用jQuery获取输入值,这很简单,我也知道如何选择他使用.select()的独立元素的值。
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().
在我的div中,我有一系列不同的元素类型,包括输入,标签,选择等。我需要一个整体选择所有元素。我之前添加的jsFiddle链接显示了如何设置div的范围并选择像p标签等元素的文本。我需要的是设置div的内容范围,当我点击ctrl + c或cmd + c时复制输入的值以及标签。
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.
总而言之,使用.val和.select将不起作用,我不这么认为。我需要以某种方式结合上述内容,但不确定如何实现。任何想法?
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?
推荐答案
检查这个小提琴: 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);
}
};
并使用它:
$('#selectme').selectText();
您可以将上述插件与事件处理程序结合使用如果你想创建选择链接:
You can couple the above plugin with an event handler if you want to create selection links :
代码:
$('.select-text').on('click', function(e) {
var selector = $(this).data('selector');
$(selector).selectText();
e.preventDefault();
});
用法:
<a href="#" class="select-text" data-selector="#some-container">Select all</a>
<div id="some-container">some text</div>
演示:请参阅 js小提琴
这篇关于使用jQuery select()选择div的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!