[JS] Jak dodać dodatkowy tekst do tekstu kopiowanego ze strony?

Jak często zdarza ci się kopiować tekst na stronie metodą "kopiuj-wklej"? Domyślam się, że od czasu do czasu każdemu się to zdarza. A czy zastanawiałeś/aś się czy można dodać jakiś dodatkowy tekst do tak skopiowanego tekstu? Jasne, że tak.

Sekcja 1Implementacja mechanizmu w Javascript

Akcja aktualizacji tekstu będzie miała miejsce w momencie zaznaczania tekstu i uruchumienia akcji kopiowania $.on('copy', fn);. Kod który zmienia zawartość skopiowanego tekstu wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$('body').on('copy', function (e) {
  // jeśli strona jest otwarta w IE8 lub starszej przeglądarce,
  // nie uruchamiaj dalszego kodu. Przeglądarka nie wyrzuci błędów
  if (typeof window.getSelection === undefined) {
    return;
  }
 
  // pobierz zaznaczony tekst
  var selection = window.getSelection();
 
  // jeśli zaznaczony tekst jest krótszy niż 30 znaków,
  // to nie uruchamiamy dalszej części kodu
  if (('' + selection).length < 30) {
    return;
  }
 
  var body      = $('body');
  var container = $('<div>');
 
  // dodajemy jakiekolwiek style,
  // tutaj ukrywamy widoczność kontenera ze skopiowanym tekstem
  container.css({
    'position'  : 'absolute',
    'opacity'   : '0',
    'z-index'   : '0'
  });
  // wstawiamy zaznaczony do kontenera
  container.append(selection.getRangeAt(0).cloneContents());
  // dodajemy kontener z tekstem do przeglądarki
  body.append(container);
 
  // aktualizujemy zawartość skopiowanego tekstu o nasz tekst
  // zakładamy że skopiowany tekst znajdzie się na innej stronie
  // stąd te tagi HTML
  container.append(
    '<p>Więcej informacji znajdziesz na: ' +
    '<a href="' + document.location.href + '">' + document.location.href + '</a> ' +
    '&copy; Blog Webmasterski - Piotr Nalepa</p>'
  );
 
  selection.selectAllChildren(container[0]);
  // na koniec usuwamy kontener z nową zawartością skopiowanego tekstu
  window.setTimeout(function () {
    body.remove(container);
  }, 200);
});

Mechanizm działania jest dość prosty. Korzystamy z interfejsu Selection, który pozwala nam na manipulację zaznaczonym, skopiowanym tekstem.
Na początku, sprawdzamy czy przeglądarka wspiera funkcjonalność. Następnie sprawdzamy długość tekstu i jeśli ma wymaganą minimalną długość, to tworzymy nowy pusty <div/> do którego wklejamy skopiowany tekst. Następnie, do nowoutworzonego elementu <div/> doklejamy pożądany przez nas tekst i odświeżamy zawartość schowka ze skopiowanym tekstem. Na koniec, usuwamy niepotrzebny <div/> z naszego kodu.

Sekcja 2Podsumowanie

Jestem w stanie sobie wyobrazić wykorzystanie tego skryptu na wielu stronach bogatych w treści. Szczególnie na stronach przydatnych uczniom szkół lub na stronach, które chcą przechwytywać dane użytkowników. Może to być pożyteczne narzędzie, ale jeśli webmaster będzie miał złe zamiary to może się to obrócić przeciwko użytkownikowi danej strony.

Należy wspomnieć, że przykład nie działa w Internet Explorer 8 i niżej, ale kto by się tymi przeglądarkami przejmował?

źródło