• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kopiowanie e-maila po kliknięciu na "przycisk".

Object Storage Arubacloud
0 głosów
460 wizyt
pytanie zadane 18 września 2019 w HTML i CSS przez Kajoo123 Nowicjusz (140 p.)

Cześć, dopiero co zacząłem moją przygodę z tworzeniem stron i po drodze napotkał mnie pewien problem. 
Mój problem polega na tym, że stworzyłem diva i wystylizowałem go na przycisk (z buttona korzystać nie chcę ponieważ zepsuje mi to wygląd strony) teraz chciałbym aby po kliknięciu na ten "przycisk" do schowka kopiował się podany przeze mnie e-mail. Jak takie coś zrobić, czego użyć?

<div class="button">Kopiuj e-mail</div>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 20px;
    color: #FFFFFF;
    padding: 20px;
    width: 150px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0;
    border-radius: 25px;
    height: 20px;
}

.button:hover {
    background-color: #198bff;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

 

komentarz 18 września 2019 przez Kajoo123 Nowicjusz (140 p.)
Oczywiście, jeśli z buttonem będzie 100 razy łatwiej jestem skłonny go użyć.
komentarz 18 września 2019 przez lateM Pasjonat (17,660 p.)
W jaki sposób zepsuje Ci to wygląd? Nadaj mu style z klasy ".button" i będziesz miał dokładnie taki sam element (usuń tylko to sztywne height ze stylów). Button nadaje się do tego o wiele lepiej. Różni się na przykład tym, że ma style, które odpalą się w momencie "focus", o których na przykład tutaj nie pomyślałeś :)
komentarz 18 września 2019 przez Kajoo123 Nowicjusz (140 p.)
Zrobiłem jak pisałeś, rzeczywiście wszystko wygląda tak samo ale jak teraz z buttonem zrobić to o czym pisałem wyżej?
komentarz 18 września 2019 przez Kamil Gadawski Użytkownik (570 p.)
Kopiowanie e-mail to już musisz odsłużyć po stronie JS
komentarz 18 września 2019 przez lateM Pasjonat (17,660 p.)
Pewnie jakoś poprzez javascript, szukaj pod hasłem "copy to clipboard js". Nigdy nie korzystałem z takiej opcji. Trochę przekombinowana. Musisz poinformować użytkownika, że klikając button skopiuje się mail i kiedy już kliknie jakoś poinformować o sukcesie operacji... co jeśli js nie zadziała? Warto się zabezpieczyć i gdzieś tego maila jeszcze pokazać na wypadek, jeśli użytkownik będzie wolał sobie go skopiować ręcznie, lub przepisać. Problematyczne :P wolę prostsze rozwiązania.
komentarz 18 września 2019 przez Kajoo123 Nowicjusz (140 p.)
edycja 18 września 2019 przez Kajoo123

Ja zrobiłem to tak, że mail jest pokazany na głównej a pod nim jest ten button skopiuj e-mail. Pozostaje mi jedynie poszperać trochę w internecie, dzięki za pomoc.

 

edit. udał mi się za pomocą tego https://codepen.io/shaikmaqsood/pen/XmydxJ

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 1,204 wizyt
pytanie zadane 20 lipca 2018 w HTML i CSS przez Jedwab Użytkownik (550 p.)
0 głosów
1 odpowiedź 165 wizyt

92,687 zapytań

141,598 odpowiedzi

320,087 komentarzy

62,047 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

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!

...