no-img
اِمیلا - سلام کاربر مهمان. امروز یکشنبه ۴ اسفند ۱۳۹۸

ادامه مطلب

انتشار؛ ۲۳ دی ۱۳۹۸،
41 روز پیش
حمایت از emila.ir

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

انتشار؛ ۲۳ دی ۱۳۹۸ - 41 روز پیش
5

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

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

روش اول :

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

ابتدا باید کد جاوا اسکریپت مخصوص کپی کردن با یک کلید را در قالب قرار دهیم. شما می توانید این کد را در فوتر قالب یا هیدر آن قرار دهید، یا حتی آن را در فایل های 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 از یک نام تابع دیگری استفاده کنید. این کلمه در مرحله بعدی برای اعمال روی کلید کپی کردن استفاده خواهد شد.

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

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

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

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

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

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

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

در خط اول ، در تگ P حتما باید یک ID تعریف کنید. این آی دی بسیار ضروری است و در بخش بعدی کد مورد استفاده قرار می گیرد.

در خط اول کد بالا، بجای لینک https://emila.ir باید متنی که قصد دارید بطور خودکار کپی شود را وارد کنید. بجای یک متن ثابت می توانید از زمینه دلخواه استفاده کنید یا هر کد دیگری که خروجی آن یک متن است.

در خط 2 ، متن کلید را بجای “کپی لینک” وارد کنید.

در خط 2 بجای #matn باید همان ID را وارد کنید که در خط 1 برای تگ P تعریف کرده اید. با تعریف این ID کلید و عملیات کپی کردن را به همان تگ P متصل می کنید و فرایند کپی کردن خودکار به خوبی تنظیم خواهد شد.

روش دوم

استفاده از Clipboard.js

در ابتدا باید این کتابخانه رو در سند HTML لود کنید. برای اینکار می توانید از CDN استفاده کنید و یا اینکه کتابخانه را دانلود و ان را مورد استفاده قرار دهید؛

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

فرض کنید که یک input و یک دکمه داریم و قصد داریم با یک کلیک کاربر روی دکمه، متن درون input در حافظه موقت ذخیره شود. بصورت زیر عمل می کنید:

<!-- Target --><input id="target" value="متن مورد نظر برای کپی شدن"><!-- Trigger --><button class="btn" data-clipboard-target="#target">کپی اطلاعات در حافظه موقت</button>

همونطور که میبینید یک input با id = target قرار داده ایم و یک مقدار برای ان در نظر گرفتیم تا این مقدار را در حافظه موقت کپی کنیم. برای اینکار یک دکمه با کلاس btn قرار می دهیم و برای ان ویژگی data-clipboard-target را مشخص می کنیم و مقدار ان را برابر با آی دی input مورد نظر قرار می دهیم. با اینکار به کتابخانه clipboard دستور می دهیم که متن درون این input را در حافظه موقت کپی کند.

حال یک قدم دیگر باید انجام دهیم و بعد از script که CDN را لود کردیم، یک script دیگر قرار داده و کد زیر را درونش جایگذاری می کنیم:

var clipboard = new Clipboard('.btn');

اکنون یک نمونه جدید از سازنده Clipboard به وجود آوردیم و المنت با کلاس .btn رو به ان پاس دادیم. با اینکار کتابخانه Clipboard برای دکمه مورد نظر پیاده سازی خواهد شد و عمل کپی شدن زمانی که روی دکمه مورد نظر کلیک شود، انجام خواهد شد.

تا اینجا متن مورد نظر را در حافظه موقت ذخیره کردیم.

می توانید حتی متن مورد نظرتان را Cut کنید

با استفاده از cut کردن میتوانید متن مورد نظر را به کلی به حافظه موقت انتقال دهید تا در مکان اولیه حذف شود. برای اینکار باید ویژگی data-clipboard-action را برابر با cut قرار دهید. این ویژگی بصورت پیش فرض برابر با copy می باشد و به همین دلیل زمانی که ان را مشخص نمی کنید و بر روی دکمه مورد نظر کلیک می شود، عمل کپی شدن انجام می شود.

برای اینکار بصورت زیر عمل کنید:

<!-- Target --><input id="target" value="متن مورد نظر برای کپی شدن"><!-- Trigger --><button class="btn" data-clipboard-target="#target" data-clipboard-action="cut">انتقال اطلاعات در حافظه موقت</button>

اکنون ویژگی مورد نظر را قرار دادیم و خواهید دید، متن مورد نظر Cut خواهد شد.

کار با رویدادها

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

دو رویداد برای این کتابخانه وجود دارد:

  • success : این رویداد زمانی که عملیات کپی یا Cut شدن با موفقیت انجام شود، رخ می دهد.
  • error : این رویداد زمانی که مشکلی در عملیات کپی یا Cut شدن وجود داشته باشد، رخ می دهد.

برای اینکار بصورت زیر عمل کنید و عملیات انجام شده را در Console به کاربر نمایش دهید:

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {	console.info('Accion:', e.action);	console.info('Text:', e.text);	console.info('Trigger:', e.trigger);	e.clearSelection();
});
clipboard.on('error', function(e) {	console.error('Accion:', e.action);	console.error('Trigger:', e.trigger);
});

خط اول که همان کد قبلی می باشد. در خطوط 3 و 11 رویدادهای مورد نظر را تعریف کرده ایم و برای هر کدام یک Callback مشخص کردیم و این توابع در زمانی که رویدادهای مورد نظر رخ دهند، فراخوانی خواهند شد.

همونطور که مشاهده می کنید در رویداد success سه مورد رو در Console چاپ می کنیم:

  • action : نوع عملی که انجام شده است ( copy یا cut می باشد.)
  • text : متنی که در Console چاپ شده است.
  • trigger : المنتی که این رویداد را به وجود آورده است (در اینجا دکمه ای که بر روی اون کلیک شده است.)

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

مطالعه بیشتر روش دوم در این لینک

هیچ نظری وجود ندارد

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