使用jQuery自動選擇文本內部的span標記內的文本

我有一個包含一系列span標記的div，每個標記都包含一個文本字符串。我想附加一個jQuery點擊事件到所有跨度，這樣當點擊任何跨度內的文本時，整行文本（dom> innerText對象）將被自動選中，以方便拖放或複製/粘貼文本字符串。使用jQuery自動選擇文本內部的span標記內的文本

例如，我的內容是......

<div id="mySpans"> 
    <span>&nbsp;This is my text&nbsp;</span> 
    <span>&nbsp;This is my text&nbsp;</span> 
</div>

如果光標點擊跨度內的任何文字，我想選擇範圍內的文本，以便它可以拖/下降（沒有span標籤，只是span的innerText）作爲副本。

jQuery是否有一個簡單的方法來做到這一點？

編輯：什麼我試圖完成更詳細的解釋：

沒有腳本的援助，以複製文本塊，用戶必須手動將選擇整個文本選擇矩形塊。文本然後變爲選中信號，點擊&拖動事件將拾取所有選定的文本。所以我試圖創建一個腳本，允許單擊文本來自動爲用戶選擇文本，所以他們不必手動自己做。

來源

2010-11-12 Scott B

我認爲，出於安全原因，不允許操縱用戶選擇。這將是非常邪惡的。這就好像某人說「嗨」，你會讓他說「我想要一個比薩餅」，接受它作爲比薩餅的訂單，並讓他支付它... – 2010-11-12 14:07:20

@Justin，也許，但我'只是讓用戶在這種情況下選擇一個文本塊更簡單。該腳本只是被用作允許點擊事件（他們發起）來完成選擇（許多用戶覺得難以做到）的快捷方式。 – 2010-11-12 14:20:20

@Justus，是的，但是無論如何，你會在服務器端做到這一點，讓客戶*看到*你的命令搞砸了'惡'級別的低端（和愚蠢的高端'scale）... = b – 2010-11-13 12:51:19

沒錯。簡短的回答是：你不能。

然而，這並不是很有幫助。所以，如果你願意接受一個稍微哈克方法，至少有一點需要注意，您可以：

由於HTML：

<div id="wrap"> 
    <span class="copyText">This is some text to copy.</span> 
    <span>Can't copy <em>this</em> (automatically...)!</span> 
    <span class="copyText">And this is yet more text.</span> 
</div>

而CSS：

span.copyText { 
    position: relative; 
    display: block; 
} 
textarea { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 0 none transparent; 
    margin: 0; 
    padding: 0; 
    outline: none; 
    resize: none; 
    overflow: hidden; 
    font-family: inherit; 
    font-size: 1em; 
}

你可以使用以下jQuery：

$(document).ready(
    function() { 
     $('.copyText').click(
      function() { 
       if ($('#tmp').length) { 
        $('#tmp').remove(); 
       } 
       var clickText = $(this).text(); 
       $('<textarea id="tmp" />') 
        .appendTo($(this)) 
        .val(clickText) 
        .focus() 
        .select(); 
     return false; 
    }); 
$(':not(.copyText)').click(
    function(){ 
     $('#tmp').remove(); 
    }); 

});

必需JS Fiddle demo, at: http://jsfiddle.net/davidThomas/ZmYBh/。

主要告誡是元素要複製不能（這種方法至少）從一行換到下一（除非這也是display: block），我懷疑它是與如何原生form元素呈現爲「實心」矩形，不同於大多數其他inline元素，例如在包裝時形成更多...'流體'（？）矩形的html）。

但是，也可能有其他人。

JS Fiddle demo to show that it does work with wrapping text, so long as the parent container element (span) is still display: block;。

編輯：補充一點，我嘗試使用 input！而非 textarea其中，可以預見，未能奏效任何不同/優於 textarea，也 <span contenteditable>，這（再次，可以預見）沒有選擇文字，但在文本的開頭插入了脫字符號。

感嘆。我認爲這個問題應該有一個更容易的答案，但是我無法在我的生活中看到它。

來源

2010-11-13 12:50:01

謝謝大衛。我很感謝你的回答。 – 2010-11-15 19:53:00

你絕對歡迎，我知道這不是你想要的，但我希望它有一點幫助，至少... =/ – 2010-11-15 20:01:39

它可以幫助我，謝謝 – 2013-12-23 04:14:32

檢查select()事件:)

來源

2010-11-12 13:35:39 tbleckert

select（）僅用於文本 - 輸入元素... – 2010-11-12 14:01:11

那麼，當時我在這裏是新的，這就像兩年前..給我一個休息時間：PI完全同意你，雖然 – tbleckert 2012-08-18 22:29:57

$("span").click(function(){ 
var mytext = $(this).text() 
})

將使文本在JavaScript變量...但它可能會更快地看看jQuery用戶界面，特別是draggable。

來源

2010-11-12 13:38:11 NimChimpsky

我認爲他只是想文本突出顯示，以便文本可以通過上下文菜單複製。我不確定他希望將它分配給JavaScript變量。 – 2010-11-12 13:39:29

@David：是的，通過上下文菜單複製或拖放到內容中。如果選擇了文本，它通常會自動拖動。由於目標是WordPress內容編輯器，因此拖放區域已經準備好拖放。 – 2010-11-12 14:22:08

@David：我認爲你對自己想做的事有最好的理解。有什麼建議麼？ – 2010-11-12 14:23:15

試着這麼做

$('#mySpans span').hover(function() { 
    $(this).addClass('spanhover'); 
}, function() { 
    $(this).removeClass('spanhover'); 
});

，你動態地添加一個類「spanhover」你在CSS部分定義像

#mySpans.spanhover {background-color:yellow;}

來源

2010-11-12 13:39:15 initall

我想他希望它可以作爲文本選擇到上下文菜單（或任何）複製到剪貼板;我不認爲他在試圖塑造它。 – 2010-11-12 13:41:12

@David：但他寫道「......文字會......突出顯示......」。正如@NimChimpsky指出的那樣，隱藏的問題的第二部分可以通過'可拖動'的ui代碼完成。 – initall 2010-11-12 13:53:03

大衛是對的。對我而言，不好的選擇。在這方面，我的意思是選擇，而不是風格。 – 2010-11-12 14:10:51

tbleckert是在正確的軌道上。 .select（）事件只能用於輸入，所以你需要讓你的<span>成爲輸入，然後在沒有背景，無邊框和沒有聚焦環的情況下對其進行設置。然後，你可以這樣做：

<input type="text" style="border:none; background:transparent; outline: none;" class="selectOnClick" />

，然後你的jQuery會是這個樣子

$('input.selectOnClick').click(function(){ $(this).select(); });

這是未經測試的代碼，但應該指向你在正確的方向。

來源

2010-11-12 13:56:07 jxpx777

由於此代碼駐留在駐留在WordPress編輯器中的插件中，並且位於父窗體標記中，因此在保存或發佈帖子時，輸入元素的外觀是否會改變發佈後事件？我不想在這種情況下爲提交添加噪音。 – 2010-11-12 14:33:45

外觀應該不重要，並且該字段仍然應該是可編輯的。 – jxpx777 2010-11-12 18:10:26

我不希望這些字段是可編輯的。它們是隻讀的，僅用於複製/粘貼或拖放到內容中。 jQuery是否有一個用於在元素的innerText上進行文本選擇的方法？這就是我在這裏尋找的。 – 2010-11-12 20:12:48

使用DOM範圍：http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

var span = ... 
var range = document.createRange(); 
range.setStartBefore(span.firstChild); 
range.setEndAfter(span.lastChild); 
var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range);

來源

2011-06-01 23:19:00 Evan

發現這個核心的JavaScript的解決方案，工作得很好，是黑客免費電話： http://coderzone.org/library/Select-text-in-a-DIV-SPAN-or-table-cell_1047.htm

我冒昧地改變一下代碼，以便它接受元素節點作爲參數而不是元素ID。

// Selects text inside an element node. 
function selectElementText(el) { 
    removeTextSelections(); 
    if (document.selection) { 
     var range = document.body.createTextRange(); 
     range.moveToElementText(el); 
     range.select(); 
    } 
    else if (window.getSelection) { 
     var range = document.createRange(); 
     range.selectNode(el); 
     window.getSelection().addRange(range); 
    } 
} 

// Deselects all text in the page. 
function removeTextSelections() { 
    if (document.selection) document.selection.empty(); 
    else if (window.getSelection) window.getSelection().removeAllRanges(); 
}

來源

2012-05-18 02:58:20

我想做類似的事情。我的網站引用了我希望用戶能夠輕鬆複製的內容。我也想將作者的名字添加到字符串中。

通常情況下，我有用戶選擇設置爲無，所以我創建需要時以編程方式應用類...

.editable { 
    user-select: text; 
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    -o-user-select: text; 
}

所有的報價都在一個名爲「paragraph_quote」級。當站點訪問者點擊報價，後續序列發生：

$(".paragraph_quote").on("click", function() { 
    var addendum = " [by Author]"; 

    if (! $(this).attr("contenteditable") || $(this).html().indexOf(addendum) === -1) {  
      $(this).removeData("quote") 
      .data("quote", $(this).html()) 
      .html($(this).html() + addendum) 
      .attr("contenteditable", true) 
      .addClass("editable") 
      .focus() 
     ; 
    } 
    document.execCommand('selectAll', false, null); 
}).on("blur", function() { 
    $(this).removeClass("editable").html($(this).data("quote")); 
});

看看，看看下面的步驟已經執行（即用戶是否點擊了裏面的相同第二次段）。如果這是第一次，請執行步驟2到步驟7.如果不是，則步驟8。
如果這不是第一次單擊報價單，則刪除可能已存儲的任何數據。
將引用的HTML存儲爲數據。這允許您修改副本的HTML（如果您願意），然後輕鬆地將其恢復到原始狀態。
向HTML中添加任何其他文本（例如作者姓名）。不顯示如下：我還使用.replace（）刪除任何特殊的HTML字符，如非分離空格，em-dashes等。
使段落可編輯。
添加可編輯類。
將焦點設置爲段落。可編輯類確保焦點輪廓的外觀。
選擇可編輯段落的全部內容。並不是說這個步驟很有用，即使其他步驟已經被採用了，因爲如果用戶在選擇內點擊，它會導致整個選擇被重新突出顯示。
當用戶點擊該段的外，刪除編輯類和...
的HTML還原到其先前狀態（如果修改，如步驟4所示，上文）。

來源

2013-12-08 20:49:10

使用jQuery自動選擇文本內部的span標記內的文本

回答

相關問題