CARA MEMBUAT TOMBOL COPY PADA TEXT AREA

Kali ini yang akan saya bahas pada artikel kali ini adalah bagaimana cara membuat tombol copy pada text area, tujuan membuat tombol copy ini adalah untuk mempermudah dalam proses pengcopyan text yang ada pada text area.

Artikel Terkait : Cara Membuat Tombol Link Html

Untuk membuat tombol copy pada text area yang ditampilkan pada blog, Caranya sebagai berikut :

Langkah yang pertama dengan mengcopy kode dibawah ini dan pastekan pada template blog pada bagian Edit Html diatas  </body>

<script type='text/javascript'> var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); copyTextareaBtn.addEventListener('click', function(event) { var copyTextarea = document.querySelector('.js-copytextarea'); copyTextarea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } }); </script>
Untuk langkah yang kedua dengan mengcopykan kode dibawah ini dan pastekan kode  masih pada template bagian edit html diataskode  ]]></b:skin>, kode ini digunakan untuk mengatur letak text area atau kotak text area yang akan dicopy sesuai dengan yang anda inginkan.

 

  .js-copytextarea{ border:1px solid blue;border-left:5px solid blue;background:#eee; display:block;margin:5px 0 10px 0;word-break: break-all; text-align:left;width:95%;height:150px;overflow:auto;}

Langkah yang terakhir dengan mengcopy kode dibawah ini pada artikel yang akan dipasangi tombol copy dan text area pada mode html, berikut kode yang harus dicopy :

 

<button class="js-textareacopybtn">Copy All</button> <textarea class="js-copytextarea"> Letakkan text yang akan dicopy pada bagian ini……. */textarea>

 Ganti kode *textarea menjadi </textarea>

Demikian artikel yang dapat saya bagikan mengenai bagaimana cara membuat tombol copy pada text area pada blog, semoga bermanfaat.

Thanks For Reading

• Tweet
• Share
• Share
• Share
• Share

About Admin

Jangan menyerah atas impianmu, impian memberimu tujuan hidup. Ingatlah, sukses bukan kunci kebahagiaan, kebahagiaan adalah kunci kesuksesan. Semangat!! Jangan lupa bahagia.

Related Post