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

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

• با کلیک بر روی یک دکمه قسمتی از یک متن خاص را در 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 و ... را انجام میدهد .  MDN, Can I Use
• Selection API - اجازه میدهد هر بخشی از متن که در سند HTML وجود دارد را به سادگی انتخاب کنید . MDN, Can I Use
• رویداد Copy جاوا اسکریپت - رویدادی که هنگام فشار دادن کلید های CTRL/Cmd+C یا انتخاب عمل Copy از منوی که هنگام راست کلیک مشاهده میشود . MDN, Can I Use

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