使用 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 fiddle

Answer 2

如果你想把输入元素和所有东西一起选择。

这里是一个jQuery混合，JS解决方案

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

Answer 3

如果您想选择内部表单元素。使用.focus() /.blur() 和.val() 函数。

 $('input').focus(); //focus on input element
 $('input').val(); //return the value of input

Answer 4

不是真的。在大多数浏览器中，一次选择多个输入的内容是不可能的。见http://jsfiddle.net/timdown/D5sRE/1/