کپی خودکار متن با کلیک روی آن با کد جاوا اسکریپت و HTML

کپی خودکار متن با کلیک روی آن با کد جاوا اسکریپت و HTML

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

برای کپی خودکار متن با کلیک روی آن در وردپرس با ما همراه باشید

استفاده از کد JS :

برای استفاده باید ابتدا کد زیر را در header.php یا footer.php یا حتی فایل های JS خود قرار دهید

<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
  alert('کپی با موفقیت انجام شد');
}
</script>

شما میتوانید متن عملیات کپی شدن را تغییر دهید

سپس شما باید کتابخانه جاوا اسکریپ را معرفی نمایید . کد زیر را هم به قالب خود اضافه نمایید

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

خب اکنون به مهم ترین مرحله رسیدیم . شما باید یک تگ کلیک کردن (button) و یک تگ متنی (p) طراحی کنید.شما میتوانید از کد زیر استفاده نمایید

<p id="matna4">https://a4fran3.ir</p>
<button onclick="copyToClipboard('#matna4')">کپی لینک</button>

خب شما در خط اول میتوانید متن خود را بنویسید که ما بجای متن آدرس اینترنتی سایت خود را نوشته ایم

در خط دوم متن درون دکمه خود را مینویسیم