96
0
Short URL JavaScript orchiddev.ir

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

1 دقیقه

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

کد 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(); ?>

پیش نمایش :

Screenshot 2023 10 06 at 17 37 01 تست دوره طراحی و کد نویسی پوسته ووکامرس

موفق باشید 🙂

JavaScript اکتبر / 06 / 2023 542

دیدگاه شما