Logowanie

Kopiowanie tekstu po kliknięciu w zdjęcie.

pytanie zadane 31 maja 2019 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 p.)

Chcę skopiować adres email po kliknięciu w diva. Div ma clipboard image w tle. Tekst jest obok po lewej jako podpis. <div>Jakiś tekst email</div><div>Zdjęcie w tle i inne style</div>

<script>

function myFunction() {

/* Get the text field */

var myString = "example@example.pl"



var copyText = document.getElementById(myString);



/* Select the text field */

copyText.select();



document.execCommand(myString);



/* Alert the copied text */

alert("Adres email został skopiowany do schowka: " + copyText.value);

}

</script>

2 odpowiedzi

odpowiedź 1 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)

odpowiedź 1 czerwca 2019 przez Mateo13 Bywalec (2,360 p.)

tu masz działajacy kod z moim opisem

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  <h1>click on image to copy</h1>
  <h3>or add your own value</h3>
  <input type="text" id="custom" placeholder="type any email" /><br/><br/>
  <img id='imageUrl' style='width:100px' src="https://yt3.ggpht.com/a/AGF-l7-BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-mo-c-c0xffffffff-rj-k-no" alt="">
    <h2>paste selected text below</h2>
  <textarea cols="50" rows="5"></textarea>
  </div>
  </body>
</html>
<script>
    const customInput = document.getElementById('custom');

  // select image you want to click on
  const img = document.getElementById('imageUrl');
  // add on click event listener
  img.onclick = function(){
    if(customInput.value.length>0){
      customInput.select();
      document.execCommand("copy");
      customInput.value='';
      return undefined;
    }
  // create new temporary input
  let temp =  document.createElement("input"); 
  //add input to DOM tree
  document.body.appendChild(temp);
  //set input value ( default should be pornhub ofc  )
  temp.value = 'https://pl.pornhub.com/';
  //select input value
  temp.select();
  // copy what is selected 
  document.execCommand("copy");
  // remove temporary input element from DOM tree
  temp.remove();
  }
  
  
</script>

komentarz 1 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

Twój kod jest związany z inputem, natomiast ja potrzebuję skopiować zwykły tekst z diva. Owszem 10 sekund, ale wszystko dotyczy inputów.

komentarz 1 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

<div class="socials">
          <div class="social clearfix" id="email"><img src="images/contact1.png"
              alt="kontakt"><span>kontakt@kontakt.pl</span>
            <div class="copy" onclick=myString()></div>
          </div>
          <div class="social clearfix"><img src="images/contact2.png" alt="kontakt"><span>654654654654</span></div>
          <div class="social clearfix">
            <!-- <img src="images/contact3.png" alt="kontakt"> -->
            <span>kontakt</span></div>
          <div class="social clearfix"><img src="images/contact4.png" alt="kontakt"><span>@kontakt</span></div>
          <div class="social clearfix"><img src="images/contact5.png" alt="kontakt"><span>kontakt</span></div>

        </div>

div class copy

CSS

.copy{
  background-image: url(../images/control/COPY.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left:20px;
  min-height:72px;
  min-width:30px;
  font-size: 36px;
  line-height:72px;
  color:white;
  float:left;
}

komentarz 1 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

../images/control/COPY.png to zdjęcie i ta klasa ma być klikalna a kopiować ma się ten tekst obok, nie owinę tego divem, bo całość będzie klikalna, a chce tylko to zdjęcie klikalne.

komentarz 1 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

Ten pierwszy wygląda całkiem okej. Chcę kopiować na sztywno. Może być wpisane w skrypcie co ma być skopiowane. Klikam w zdjęcie, nie musi odsyłać do diva, tylko kopiuje jakiś tam okreslony tekst do schowka.

komentarz 1 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

Button działa, ale to nie jest preferowane przeze mnie rozwiązanie, psuje mi wygląd strony, spada SEO nie mogę dać alternatywy dla obrazka, bo wchodzi to w kopiowany tekst.

komentarz 1 czerwca 2019 przez dawid6512 Gaduła (4,550 p.)

to sobie sam napisz jak ci nie odpowiada, dostałeś linki oraz kod, teraz to wykorzystaj a nie aby marudzisz, nie jesteśmy darmową siłą roboczą :)

komentarz 2 czerwca 2019 przez Grzegorz Mikina Dyskutant (8,060 p.)

Tak zrobię. Dzięki za pomoc. :):):)

Podobne pytania

0 głosów

1 odpowiedź 495 wizyt

Kopiowanie tekstu ze zmiennej do schowka, bez użycia żadnych frameworków

pytanie zadane 18 października 2016 w JavaScript przez 123skiper Bywalec (2,170 p.)

0 głosów

1 odpowiedź 1,628 wizyt

Jak schować diva po kliknięciu przycisku Za Pomocą JQuery ?

pytanie zadane 16 sierpnia 2015 w JavaScript przez McShadow Obywatel (1,050 p.)

0 głosów

2 odpowiedzi 1,711 wizyt

Kopiowanie tekstu do schowka

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

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...