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

کپی خودکار متن با کلیک روی آن با کد جاوا اسکریپت و 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>

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

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

لینک کوتاه:

https://a4fran3.ir/?p=17189

guest
8 نظرات
Inline Feedbacks
مشاهده همه نظرات
سعید

سلام این کد را میتونم برای وردپرس استفاده کنم ؟؟

سعید

چطوری میتونم این کد را داخل افزونه ایفرم استفاده کنم؟؟

سعید

ایا کسی را میتونید معرفی کنید که این کارا برای من انجام بده چون خیلی برام مهمه

Diamond Block

بسیار علی بود

مطالب مشابه