使用jQuery select()选择div的内容

Question

是否可以使用或调整jQuery的.select()来设置div的整个内容的选择范围？

我有一个div,它有一系列标签,输入,选择对象和一些其他UI元素.我在一个单独的StackOverflow帖子上找到了代码,其中一些代码托管在jsFiddle上:http://jsfiddle.net/KcX6A/570/

这可以适应选择输入值吗？或者你会怎么建议我这样做？

谢谢,康纳

---

编辑:更多信息

我知道如何使用jQuery获取输入值,这很容易,我也知道如何使用.select()选择独立元素的值.

在我的div中,我有一系列不同的元素类型,包括输入,标签,选择等.我需要对所有元素进行全面选择.我之前添加的jsFiddle链接显示了如何设置div的范围并选择像p标签等元素的文本.我需要的是设置div的内容范围,当我点击ctrl + c或cmd + c时复制输入值和标签.

总而言之,使用.val和.select将不适用于此我不认为.我需要以某种方式结合上述内容,但不确定如何实现.有任何想法吗？

Answer 1

检查这个小提琴:http://jsfiddle.net/JAq2e/

基本上诀窍是引入隐藏文本节点,其内容将在复制时包含在选择中.

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();

如果要创建选择链接,可以将上述插件与事件处理程序耦合:

代码:

$('.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小提琴