Javascript 使用jQuery select（）选择div的内容

是否可以使用或调整jQuery的.select（）在div的整个内容上设置选择范围

我有一个div，它有一系列标签、输入、选择对象和一些其他UI元素。我在一篇单独的StackOverflow文章中发现了一些代码，其中一些代码托管在JSFIDLE上：

这是否也可用于选择输入值？或者你建议我怎么做

谢谢， 康纳

---

编辑：更多信息

我知道如何使用jQuery获取输入值，这很简单，我还知道如何使用.select（）选择独立元素的值

在我的div中，我有一系列不同的元素类型，包括输入、标签、选择等。我需要所有元素的整体选择。我前面添加的jsFiddle链接显示了如何设置div的范围和选择p标记等元素的文本。我需要设置div内容的范围，当我点击ctrl+c或cmd+c时，它会复制输入值和标签

---

因此，总结一下，使用.val和.select对这一点不起作用，我认为。我需要以某种方式将以上内容结合起来，但不确定这将如何实现。有什么想法吗？

如果要选择内部表单元素。使用

.focus（）/.blur（）

和

.val（）

函数

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

---

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

这是一个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

---

不是真的。在大多数浏览器中，不可能同时选择多个输入的内容。请参见检查此小提琴：

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

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

---

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

代码：

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

一些文本

---

演示：请参见

您的意思不是吗？为了什么目的，您希望选择所有内容，包括输入值？是为了还是，您的演示甚至没有选择一个框？我知道，这是我在尝试提出解决方案时遇到的问题。我发现真正令人恼火的是，当你复制界面上的所有元素或选择界面/html页面上的所有元素时，它会选择html输入的框架，但不会选择内容，尽管这会让人产生内容也被高亮显示的错觉。本机问题可能很少出现，因此永远不会被处理。@Starx:在哪个浏览器中？它在我的Windows Chrome和Firefox中选择第二个框的内容。这是一种享受，很棒的工作！我不得不对它进行一些调整，通过将前置元素的不透明度设置为0，使它更整洁。否则，该过程远不是无缝的：）只有在需要零件的情况下

<a href="#" class="select-text" data-selector="#some-container">Select all</a>
<div id="some-container">some text</div>