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

در این آموزش قصد داریم روشهای مختلف Copy کردن متن مورد نظر در حافظه موقت کامپیوتر یا Clipboard رو به شما آموزش بدیم.

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

هر روشی که در اینترنت برای کپی کردن متن در حافظه موقت وجود داره، حتما به عمل کردن کاربر نیاز داره. یعنی کاربر حتما باید شخصا بر روی یک مورد خاص کلیک کنه تا بتونه متن مورد نظرشو در Clipboard ذخیره بکنه. هیچ روشی رو نمیتونین پیدا کنین (حتی flash) که بشه بدون اقدام کاربر و بصورت اتوماتیک متنی رو کپی کنید.

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

روش اول : execCommand

اولین روشی که برای کپی کردن متن از اون استفاده میکنیم، متد execCommand مربوط به شئ سراسری document می باشد. پشتیبانی مرورگرها از این ویژگی خوب هست و میتونین با خیال راحت از اون استفاده کنید:

همونطور که میبینید مرورگرها پشتیبانی خوبی از این متد دارند.

حتما کاربر باید اقدامی رو انجام بده تا بتونین متن مورد نظر رو در حافظه موقت ذخیره کنید. در اینجا یک textarea و یک دکمه قرار میدیم و میخوایم زمانی که کاربر بر روی دکمه کلیک کرد، متن درون textarea انتخاب شده و در حافظه موقت کپی بشه.

پیاده سازی مثال ساده

در اینجا میخوایم یک مثال ساده رو قرار بدیم تا نحوه کار با این متد رو یاد بگیرید. در ابتدا یک دکمه و یک textarea رو قرار میدیم:

خب بعد از اون در Javascript به این المنت ها دسترسی پیدا میکنیم. بصورت زیر:

همونطور که میبینید در ابتدا دکمه مورد نظر رو در متغیر copyTextareaBtn قرار دادیم و در خط 3 یک رویداد click برای اونا مشخص کردیم و زمانی که بر روی دکمه مورد نظر کلیک بشه، کدهای مربوط به اون اجرا میشن.

میبینید که در خط 4 المنت textarea رو در متغیر copyTextarea ذخیره کردیم و در خط بعد ابتدا با استفاده از متد select همه متن مورد نظر رو انتخاب میکنیم. دلیل اینکار اینه که متد execCommand همه متن هایی که در حال حاضر انتخاب شده اند رو در حافظه موقت ذخیره میکنه. به همین دلیل ما تمام متن درون textarea رو ذخیره میکنیم و بعد از اون متد execCommand رو اجرا میکنیم تا متون انتخاب شده رو ذخیره کنیم.

همونطور که میبینید رشته copy رو درون متد execCommand قرار دادیم. با این کار متن انتخاب شده، در حافظه موقت ذخیره میشه. مثلا اگر بجای copy رشته cut رو قرار بدین، متن انتخاب شده به کلی از textarea پاک میشه و به حافظه موقت منتقل میشه.

این متد در صورت موفقیت true و در صورت عدم موفقیت False رو برگشت میده.

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

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

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

یا علی

Source

clipboard copy document execcommand javascript textarea