کد جاوا اسکریپت و HTML کپی خودکار متن با کلیک روی کلید مخصوص
کد تخفیف در جریان tabestan97 %15 تا آخر تابستان 97

در طراحی سایت، گاهی اوقات نیاز می شود تا یک لینک یا یک متن خاصی را در اختیار کاربران قرار دهیم تا کاربران بتوانند آن را کپی کرده و در شبکه های اجتماعی یا موارد دیگر مورد استفاده قرار دهند. طرح رایج و معمول چنین بخشی توسط فیلد متنی input انجام می شود که کمی قدیمی شده است! طرح پیشرفته تر این بخش را می توانیم توسط یک کلید مخصوص کپی کردن ارائه کنیم.

به این صورت که به کاربران اجازه دهیم با کلیک روی کلید مخصوصی، آن متن مورد نظر ما را به راحتی و بدون انجام مراحل رایج کپی کردن، کپی کنند و از آن استفاده کنند. قبلا چنین عملی توسط Flash انجام می شد اما در این مستند از مارکت دومی قصد داریم به شما کد HTML و جاوا اسکریپت معرفی کنیم که همین کار را برایتان به راحتی انجام می دهند.

Auto Copy With Click

در سمت چپ همین مستند، در بخش پیوست ها، فایل نمونه انجام شده این آموزش که تصویر آن هم در بالا مشاهده می کنید، برایتان قرار داده ایم که می توانید از آن استفاده کنید و توسط نرم افزارهای متنی مانند NotePad سورس پروژه را مورد بررسی قرار دهید و در صورت تمایل از روند انجام کار نمونه برداری کنید. در ادامه آموزش ایجاد چنین امکانی را به صورت مرحله ای برایتان توضیح خواهیم داد. در صورتی که در این آموزش مشکلی داشتید، در بخش دیدگاه ها با ما مطرح کنید.

 


1 . استفاده از کد جاوا اسکریپت

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

این کد ابتدا یک فیلد متنی موقت ایجاد می کند، سپس متن مورد نظر در محدوده مشخص شده توسط ID را داخل آن وارد کرده و سپس آن را کپی می کند. در نهایت یک پیام با متن “کپی انجام شد” را به کاربر نمایش می دهد تا کاربر متوجه شود که متن مورد نظرش به خوبی کپی شده.

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

نکات آموزشی:

  • در خط 8 کد بالا می توانید دستور alert را شخصی سازی کنید. اگر قصد دارید متن دیگری به کاربر نمایش داده شود، متن را ویرایش کنید یا اگر قصد ندارید هیچ پیامی نمایش داده شود، این خط را کاملا حذف کنید.
  • در خط 2 کد بالا می توانید بجای copyToClipboard از یک نام تابع دیگری استفاده کنید. این کلمه در مرحله بعدی برای اعمال روی کلید کپی کردن استفاده خواهد شد.

 


2 . کتابخانه جاوا اسکریپت را فراخوانی کنید

در این پروژه ما از کتابخانه جاوا اسکریپت نسخه 1.11.1 استفاده کرده ایم. اگر قالبتان قبلا این کتابخانه را فراخوانی کرده، نیازی به فراخوانی مجدد این کتابخانه نیست. اگر این کتابخانه فراخوانی نشده، می توانید از کد زیر استفاده کنید.

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

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

 


3 . کدهای HTML مورد نیاز را ایجاد کنید

قدم بعدی تعریف یک تگ P (متنی که قصد داریم کپی شود) و یک کلید با تگ Button (برای کپی کردن خودکار متن مورد نظر) است. به کد زیر توجه کنید:

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

نکات آموزشی:

  • در خط اول ، در تگ P حتما باید یک ID تعریف کنید. این آی دی بسیار ضروری است و در بخش بعدی کد مورد استفاده قرار می گیرد.
  • در خط اول کد بالا، بجای لینک https://devme.ir باید متنی که قصد دارید بطور خودکار کپی شود را وارد کنید. بجای یک متن ثابت می توانید از زمینه دلخواه استفاده کنید یا هر کد دیگری که خروجی آن یک متن است.
  • در خط 2 ، متن کلید را بجای “کپی لینک” وارد کنید.
  • در خط 2 بجای #matn باید همان ID را وارد کنید که در خط 1 برای تگ P تعریف کرده اید. با تعریف این ID کلید و عملیات کپی کردن را به همان تگ P متصل می کنید و فرایند کپی کردن خودکار به خوبی تنظیم خواهد شد.

 


با انجام این 3 مرحله توانستید یک کلید برای کپی کردن خودکار متن مورد نظر در سایتتان ایجاد کنید. حال برای زیباسازی می توانید از CSS هم استفاده کنید.

اگر پرسشی داشتید، در دیدگاه مطرح نمایید.

هنوز دیدگاهی ارسال نشده! نظر شما چیست؟

دیدگاه شما درباره این صفحه چیست؟