Użyj jQuery, aby automatycznie zaznaczyć tekst wewnątrz znacznika zakresu po kliknięciu

Question

Mam element div zawierający serię znaczników span, z których każdy zawiera ciąg tekstu. Chciałbym dołączyć zdarzenie kliknięcia jQuery do wszystkich przęseł, tak aby po kliknięciu tekstu wewnątrz dowolnego zakresu, cała linia tekstu (dom> obiekt innerText) zostanie automatycznie zaznaczona, aby ułatwić przeciąganie/upuszczanie lub kopiowanie/wklejanie ciągu tekstowego.

Na przykład, moja treść jest ...

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

Jeśli kursor kliknięciu na dowolny tekst w środku rozpiętości, chcę zaznaczyć tekst wewnątrz tego zakresu, tak aby mógł on być drag/spadła (bez tagów span, tylko innerText zakresu) jako kopii.

Czy jQuery ma łatwy sposób to zrobić?

EDIT: Bardziej szczegółowe wyjaśnienie co usiłuję osiągnąć:

Bez pomocy skryptu, w celu kopiowania blok tekstu, użytkownik musi ręcznie wybrać przeciągnąć prostokąt wyboru całym tekście blok. Tekst staje się następnie zaznaczony, sygnalizując, że kliknięcie zdarzenia przeciągnięcia zostanie przechwycone przez cały zaznaczony tekst. Dlatego staram się stworzyć skrypt, który pozwala na jedno kliknięcie tekstu, aby automatycznie wybrać tekst dla użytkownika, aby nie musieli go ręcznie wykonywać samodzielnie.

Answer 1

Dobrze. Krótka odpowiedź brzmi: nie można.

To jednak nie jest bardzo pomocne.Tak więc, jeśli jesteś gotów zaakceptować nieco hacky podejścia, z przynajmniej jednym zastrzeżeniem, można:

względu na 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> 

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

Ty można użyć następującego 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(); 
    }); 

}); 

Z wymaganym JS Fiddle demo, at: http://jsfiddle.net/davidThomas/ZmYBh/.

Głównym zastrzeżeniem jest to, że element, który chcesz skopiować nie (z tym podejściem co najmniej) owinąć od jednej linii do drugiej (chyba to również display: block), podejrzewam, że to ma coś wspólnego z tym, jak natywne elementy form są renderowane jako "stałe" prostokąty, w przeciwieństwie do większości innych elementów inline, takich jak html, które tworzą bardziej ... "płynny" prostokąt (?) podczas owijania).

Mogą to być jednak inne osoby.

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

---

Zmieniano: dodać, że próbowałem za pomocą input S zamiast textarea które przewidywalnie, nie udało się działać inaczej/lepiej niż textarea, a także <span contenteditable>, który (znowu, przewidywalny) nie wybrano tekst w ogóle, ale wstawił karetkę na początku tekstu.

Westchnienie. Myślę, że powinna być o wiele łatwiejsza odpowiedź na to pytanie, ale nie widzę tego dla mojego życia.

Answer 2

Sprawdź zdarzenie select() :)

Answer 3

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

wprowadzi tekst w zmiennej javascript ... ale może być szybciej przyjrzeć się jQuery UI, a konkretnie draggable.

Answer 4

Spróbuj czegoś podobnego

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

gdzie dynamicznie dodać klasę "spanhover" zdefiniowano w sekcji CSS jak

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

Answer 5

tbleckert jest na dobrej drodze. Zdarzenie .select() jest dostępne tylko dla wejść, więc musisz ustawić swój numer <span> jako wejście, a następnie nadać mu styl bez tła, bez obramowania i bez pierścienia ostrości. Następnie można to zrobić:

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

i wówczas jQuery będzie wyglądał jak ten

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

Jest to kod niesprawdzone ale powinien skierować Cię we właściwym kierunku.

Answer 6

użycie DOM wynosi: 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); 

Answer 7

Znaleziony to core-javascript rozwiązanie, które działa dobrze i jest hack za darmo: http://coderzone.org/library/Select-text-in-a-DIV-SPAN-or-table-cell_1047.htm

Pozwoliłem sobie zmienić kod trochę tak, że akceptuje węzeł elementu jako argument zamiast identyfikatora elementu.

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

Answer 8

Chciałem zrobić coś podobnego. Moja witryna zawiera cytaty, które chciałem, aby użytkownicy mogli łatwo kopiować. Chciałem również dodać nazwisko autora do napisu.

Normalnie mam użytkownika Wybierz Ustaw, aby żaden, więc stworzyłem klasę, która jest stosowana, gdy są potrzebne programowo ...

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

Wszystkie cytaty w klasie o nazwie „paragraph_quote”. Kiedy osoba odwiedzająca stronę kliknie na środki, sekwencja obserwacji następuje:

$(".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")); 
}); 

1. sprawdź, czy następujące kroki zostały już wykonane (czyli, czy użytkownik jest kliknięcie na drugi raz się w tym samym ustęp). Jeśli jest po raz pierwszy, wykonaj kroki od 2 do 7. Jeśli nie, po prostu krok 8.

2. Usuń wszystkie dane, które mogły zostać zapisane, jeśli nie jest to pierwsze kliknięcie tego cytatu.

3. Zapisz kod HTML wyceny jako dane. Umożliwia to modyfikację kodu HTML kopii (jeśli chcesz), a następnie łatwe przywrócenie oryginalnego stanu.

4. Dodaj dowolny dodatkowy tekst (np. Nazwisko autora) do kodu HTML. Nie pokazano poniżej: Używam również .replace() do usuwania specjalnych znaków HTML, takich jak spacje nie łamiące się, znaki em, itp.

5. Umożliwia edytowanie akapitu.

6. Dodaj klasę do edycji.

7. Ustaw fokus na akapit. Edytowalna klasa zapewnia wygląd konturu ostrości.

8. Wybierz całą zawartość edytowalnego akapitu. Nie oznacza to, że ten krok jest użyteczny, nawet jeśli inne kroki zostały już wykonane, ponieważ powoduje to ponowne zaznaczenie całego zaznaczenia, jeśli użytkownik kliknie w zaznaczeniu.

9. Gdy użytkownik kliknie poza akapitu, usuń edycji klasę i ...

10. Restore HTML do poprzedniego stanu (jeśli zmodyfikowane, jak wskazano w punkcie 4 powyżej).