وبلاگ

کد کپی متن یا پیوند با جاوا اسکریپت

اکثرا سایت ها برای اشتراک گذاری محتوای خود از پیوند کوتاه استفاده می کند. در این مقاله ایجاد پیوند کوتاه یا متن با جاوا اسکریپت می پردازیم.

کد HTML :

<span class='box text-center'>
     <span id="c1">https://orchiddev.ir</span>
     <button class="btn btn-light" onclick="copyFunc('#c1')"><i class="fa-light fa-copy"></i></button>
</span>

کد CSS :

.box {
    margin: 10px;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.copied {
    color: green;
}

.copied:after {
    content: attr(title)
}

کد جاوا اسکریپت :

console.clear()

function copyFunc(elemId) {
  
    let that = document.querySelector(elemId);

    navigator.clipboard.writeText(that?.innerText).then(res => {
      console.log("Copeid to clipboard: " + that.innerText );
      
      that.classList.add("copied")
      setTimeout(()=> that.classList.remove("copied"), 2000)
      
    });
}

اگر می خواهید پیوند کوتاه در وردپرس ایجاد کنید از کد زیر استفاده کنید:

<?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>

پیش نمایش :

موفق باشید 🙂