Wordpress Metin Seçimi ve Kopyalama İşlemi Nasıl Yapabilirim
3
●30
- 26-03-2021, 12:09:30Wordpress Sitemde vereceğim ibanlara tıkladıkları zaman iban numarası otomatik olarak kopyalansın istiyorum. Bunu nasıl yapabilirim.
- Kabul Edilen Cevap
- 1 Beğeni
-
- 26-03-2021, 12:25:29acilwebtasarim adlı üyeden alıntı: mesajı görüntüle
Hocam burada yer alanStep 1) Add HTML: Example <!-- The text field --> <input type="text" value="Hello World" id="myInput"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button> Step 2) Add JavaScript: Example function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); }
Kodlarını hangi dosyaya koymamız gerekiyor. - 26-03-2021, 12:28:10Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.İşlemi yapmak istediğiniz sayfaya aşağıdaki kodu eklemelisiniz
<!-- The text field --> <input type="text" value="Hello World" id="myInput"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button>
Javascript kodu olarak aşağıdaki kodu eklemelisiniz (temanın dosyasına ya da header kısmına <script> </script> kodları arasına ekleyebilirsiniz.
function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); }
Aşağıdaki kodları .css dosyasına eklemelisiniz. Görünüm > Özelleştir > Ek CSS bölümünden de ekleseniz olur
.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }