使用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小提琴

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

演示

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/