آموزش Copy کردن متن در حافظه موقت یا Clipboard با Javascript - قسمت 2

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

همونطور که میدونین library یا کتابخانه ها کارها رو برای ما آسونتر میکنن و میتونین با استفاده از اونا کارهاتون رو سرعت ببخشید. با استفاده از کتابخانه Clipboard.js به راحتی و با استفاده از چند خط کد میتونین موارد مورد نظرتون رو در حافظه موقت کپی کرده و قرار بدین.

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

روش دوم : استفاده از Clipboard.js

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

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

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

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

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

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

Cut کردن متن مورد نظر

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

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

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

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

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

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

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

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

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

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

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

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

clipboard copy document execcommand javascript textarea