Kopiowanie tekstu do schowka

pytanie zadane 23 maja 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)
zamknięte 23 maja 2020 przez Bakkit

Witam,

chciałbym aby na mojej stronie po kliknięciu w diva automatycznie kopiował się pewien tekst do schowka, tak aby potem można było go wkleić w wyszukiwarkę za pomocą ctrl+v. Jak można takie coś zrobić?

Pozdrawiam.

komentarz zamknięcia: Rozwiązanie problemu.

2 odpowiedzi

odpowiedź 23 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 23 maja 2020 przez Bakkit

Najlepsza

Dane do schowka możesz skopiować za pomocą Clipboard API lub starszej alternatywy Document.execCommand() - zależy jakie przeglądarki wspierasz.

komentarz 23 maja 2020 przez Bakkit Dyskutant (7,600 p.)

Dzięki, możesz podać przykład jak użyć Document.execCommand() ? Już chwilę próbuje i mi nie chce zadziałać.

komentarz 23 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż jak próbujesz tego użyć. Są jakieś błędy w konsoli?

komentarz 23 maja 2020 przez Bakkit Dyskutant (7,600 p.)

Kod:

var div = document.querySelector('.contactEmail');

div.addEventListener("click", function() {
    div.execCommand("copy", Boolean, "tekst");
});

Błąd:

copy.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null
at copy.js:3

komentarz 23 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)

Na początku uporaj się z brakiem referencji <div>a. :) Upewnij się, że selector .contactEmail jest prawidłowy. Jeśli tak, to możliwe że podpinasz skrypt przed elementem w kodzie HTML (a skrypt powinieneś podpiąć po elemencie lub najlepiej przed zamykającym znacznikiem </body>).

Co do użycia execCommand, to nie jest to metoda należąca do zmiennej div ani też do jej prototypu - należy do obiektu document. Użycie drugiego i trzeciego parametru (Boolean i "tekst") w tym przypadku jest zbędne. Kopiowanie opiera się o zaznaczony tekst na stronie. Możesz to zrobić samemu (myszką/klawiaturą) i wtedy odpalić komendę document.execCommand('copy'), ale to na dłuższą metę jest mało automatyczne. :) Z pomocą przychodzi metoda selectAllChildren obiektu Selection, do której przekazujesz selector elementów do zaznaczenia.

Całość możesz zapisać w ten sposób:

<div id="exampleText">Testowy tekst do skopiowania.</div>

const elementToCopy = document.getElementById('exampleText');

window.getSelection().selectAllChildren(elementToCopy);
document.execCommand('copy');

odpowiedź 23 maja 2020 przez DawidK Nałogowiec (37,910 p.)

Możesz sprobować funkcją select()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

komentarz 23 maja 2020 przez Bakkit Dyskutant (7,600 p.)

To jest pobieranie z inputa, a ja szukam czegoś co pobierze tekst, który ustawie sobie w kodzie js.

komentarz 23 maja 2020 przez DawidK Nałogowiec (37,910 p.)

inputa z wpisanym na stałe tekstem można sobie ukryć

komentarz 23 maja 2020 przez Bakkit Dyskutant (7,600 p.)

Też o tym pomyślałem, ale jeśli można stworzyć coś z bez takiego kombinowania (w czystym kodzie js), to chciałbym tego użyć.

komentarz 23 maja 2020 przez DawidK Nałogowiec (37,910 p.)

To co przychodzi mi jeszcze do głowy to utworzenie inputa (dodanie do DOM), ustawienie tekstu, skopiowanie do schowka za pomocą select() i usunięcie inputa z DOM