عنوان مقاله :

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

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 22 مهر 1395
دسته بندی ها : جاوا اسکریپت

در این پست من قصد دارم به شما نشان دهم که چطور با استفاده از چند قطعه کد ساده جاوا اسکریپت میتوانید : 

  • با کلیک بر روی یک دکمه قسمتی از یک متن خاص را در Clipboard کپی کنید .
  • متنی که در Clipboard کپی شده را در یک باکس تغییر دهید . 

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

کپی با رویداد کلیک

ویژگی شگفت انگیزی که شما میتوانید به وبسایت خود اضافه کنید ، کپی کردن یک رشته با عمل کلیک بر روی یک Button است . این تعامل میتواند در کپی کردن Url ها یا کپی کردن رشته های طولانی کلید های SSH ، دستورات تریمنالی ، یا رنگ های Hex یا هر گونه اطلاعات دیگر که قابلیت کپی و جا به جا شدن دارد استفاده شود .

برای انجام این کار ما نیاز به استفاده از یک روش جالب با استفاده از متدی به اسم execCommand داریم . این متد به شما اجازه میدهد کارهای مختلفی با محتوا انجام بدید . از جمله ای این کارها bold/italic کردن متن ها ، انجام undo/redo و همچنین انجام copy/cut/paste . 

document.execCommand('copy');

کد بالا دقیقا عملی که شما با فشار دادن کلید CTRL/Cmd+C بر روی صفحه کلید انجام میداید را انجام میدهد ، خب در قدم اول برای کپی کردن یک متن نیاز به انتخاب آن قطعه متن داریم برای همین از Selection API جاوا اسکریپت برای انتخاب متن استفاده میکنیم که به ما اجازه میدهد هر متنی که در سند HTML ما وجود دارد را به سادگی انتخاب کنیم . 

var button = document.getElementById("copy-button"),
    contentHolder = document.getElementById("content-holder");

button.addEventListener("click", function() {

    // We will need a range object and a selection.
    var range = document.createRange(),
        selection = window.getSelection();

    // Clear selection from any previous data.
    selection.removeAllRanges();

    // Make the range select the entire content of the contentHolder paragraph.
    range.selectNodeContents(contentHolder);

    // Add that range to the selection.
    selection.addRange(range);

    // Copy the selection to clipboard.
    document.execCommand('copy');

    // Clear selection if you want to.
    selection.removeAllRanges();

}, false);

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

اصلاح متن کپی شده

در اینجا به شما نشان خواهم داد که چطور میتوانید متنی که در clipboard کپی شده را در هنگام Past شدن تغییر دهید . این روش برای escaping code ، قالب بندی اعداد ، تاریخ یا برای تغییر متن مثل uppercase یا lowercase مورد استفاده قرار میگیرد . 

جاوا اسکریپت این قابلیت رو با استفاده از رویداد های Copy و Past در اختیار شما قرار میدهد. اما برای امن کردن بیشتر کار یک سری محدودیت هم برای این کار وجود دارد : 

  • در رویداد Copy ما نمی توانیم به انچه کاربر در clipboard ذخیره میکند دسترسی پیدا کنیم ، این ویژگی بخاطر حفظ حریم شخصی کاربران اینترنتی است بخاطر اینکه ممکنه است اطلاعات حیاتی را کپی کند . اما ما می توانیم اطلاعات clipboard را باز نویسی کنیم .
  • در رویداد Paste ما میتوانید اطلاعات را فقط بخوانیم و نمی توانیم چیزی را تغییر دهیم . 

اگر ما نیاز به خواندن و نوشتن در یک زمان داریم باید از ویژگی های Selection API استفاده کنیم . به کد زیر دقت کنید . 

document.addEventListener('copy', function(e){

    // We need to prevent the default copy functionality,
    // otherwise it would just copy the selection as usual.
    e.preventDefault();

    // The copy event doesn't give us access to the clipboard data,
    // so we need to get the user selection via the Selection API.
    var selection = window.getSelection().toString();

    // Transform the selection in any way we want.
    // In this example we will escape HTML code.
    var escaped = escapeHTML(selection);

    // Place the transformed text in the clipboard. 
    e.clipboardData.setData('text/plain', escaped);

});

امیدوارم با مثال تمام توضیحات برای شما روشن شده باشد . 

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

در این پست آموزشی من از چند ویژگی جاوا اسکریپت استفاده کردم مثل کار با clipboard  یا کار با APIs های دیگر که شاید شما نیاز به این داشته باشید که اطلاعات بیشتری در مورد این ابزارها بدست بیارید برای همین در زیر چند لینک برای دریافت اطلاعات بیشتر برای شما قرار میدهم . 

  • execCommand - عمل های copy, paste, cut, bold, italic, underline, delete و ... را انجام میدهد .  MDNCan I Use
  • Selection API - اجازه میدهد هر بخشی از متن که در سند HTML وجود دارد را به سادگی انتخاب کنید . MDNCan I Use
  • رویداد Copy جاوا اسکریپت - رویدادی که هنگام فشار دادن کلید های CTRL/Cmd+C یا انتخاب عمل Copy از منوی که هنگام راست کلیک مشاهده میشود . MDNCan I Use

همچنین اگر شما نیاز دارید تا کنترل بیشتری بر روی رویداد  copy/paste/cut داشته باشید میتوانید از کتابخانه clipobard.js استفاده کنید . این کتابخانه ویژگی های زیاد و جالبی برای کار با این رویداد ها دارد . امیدوارم این پست مورد استفاده شما دوستان عزیز قرار گرفته باشد . 

مقالات پیشنهادی

۱۰ تا از بهترین انیمیشن های متنی که می توانید با استفاده از CSS و JavaScript بسازید

شما می توانید با استفاده از سی اس اس و کمی جاوا اسکریپت انیمیشن های متنی زیبایی بسازید. این انیمیشن ها و جلوه ها را می توانید در هر حالتی مانند انیمیش...

۱۰ ابزار جالب css و javascript برای فرم ها

فرم ها یکی از بخش های جدایی ناپذیر وبسایت ها هستند و هر روزه ابزارهای مختلفی برای بهبود کار با فرم ها ارائه میشود . در این مقاله ۱۰ تا از ابزارهای جال...

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

ویژگی شگفت انگیزی که شما میتوانید به وبسایت خود اضافه کنید ، کپی کردن یک رشته با عمل کلیک بر روی یک Button است . این تعامل میتواند در کپی کردن Url ها...

بهبود بخشیدن به تو در تو نویسی شروط - نکات جاوا اسکریپت

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

دیدگاه های ارزشمند شما

علی | 3 ماه پیش

سلام. من این لینک رو دقیقا استفاده کردم و آی دی های خودمو وارد کردم ولی جواب نمیده و متن داخل اینپوت را کپی نمیکنه

حسام موسوی | 3 ماه پیش

در نحوه پیاده سازیش دقت کنید ممکنه در داخل console اروری داشته باشید
چک کنید