قیمت رایگان!

219 بازدید 0 دیدگاه

کپی در کلیپ برد با جاوااسکریپت

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

دسترسی به کلیپ برد با جاوا اسکریپت

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

۱- ساخت INPUT و BUTTON

ابتدا داخل فایل HTML یک input از نوع text و یک button تعریف میکنیم. وبه هر کدام یک id اختصاص میدهیم. و هدف ما این است که زمانی که روی دکمه “کپی” کلیک کردیم متن داخل input کپی شود.

۲- استفاده از ONCLICK

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

نکته: Onclick چیه؟

onclick یک Event جاوااسکریپت است، زمانی که از onclick در المان HTML استفاده میکنید؛ یعنی هر زمان که روی اون المان کلیک شد کار خاصی انجام بشه یا تابعی فراخوانی بشه.

۳- کد جاوا اسکریپت

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

  1. توسط دستور getElementById مقادیر داخل input و button را دریافت میکنیم و داخل متغیر های جدا گانه ای قرار میدهیم.
  2. حالا باید بگیم مقدار موجود در input برای ما کپی بشه و مقدار موجود در button به “کپی شد” تغییر پیدا کند.
  3. توسط تابع ()select متن داخل input را مشخص و انتخاب میکنیم.
  4. تابع ()exeCommand را فراخوانی میکنیم و مقدار copy را به آن پاس میدهیم  تا متن را برای ما کپی کند
  5. حالا که متن کپی شد باید مقدار موجود در دکمه به کپی شد تغییر پیدا کند. برای همین از دستور innerHTML به شکل زیر استفاده میکنیم.

به همین راحتی میتوان با جاوا اسکریپت متن کپی کرد

لطفا نظرات و پیشنهادات خود را در این زمینه برای ما به اشتراک بگذارید و سوالات خودتون رو برای ما بفرستید…

ویدئو آموزش کپی کردن با جاوااسکریپت

آموزش کپی کردن در کلیپ برد با جاوااسکریپت

درخواست مشاوره

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

درخواست مشاوره

نیاز به مشاوره دارید؟

در صورتی که نیاز به مشاوره دارید می توانید فرم را تکمیل نمایید و یا با ما در تماس باشید

درخواست مشاوره رایگان

moreدوره های مرتبط

نحوه استفاده از کتابخانه Particles.js

در این ویدئو نحوه کار با کتابخونه Particles.js را بررسی میکنیم و یاد میگیریم که چطوری از این کتابخونه جذاب جاوااسکریپت پس زمینه های زیبا بسازیم.

13
رایگان!

chat_bubble_outlineنظرات

قوانین ثبت دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *