دستورات را برش و کپی کنید

IE10 و بالاتر از طریق متد ()Document.execCommand از دستورات «cut» و «copy» پشتیبانی می‌کند. از نسخه ۴۳ کروم، این دستورات در کروم نیز پشتیبانی می‌شوند.

هر متنی که در مرورگر هنگام اجرای یکی از این دستورات انتخاب می شود، بریده می شود یا در کلیپ بورد کاربر کپی می شود. این به شما امکان می دهد یک راه ساده را برای انتخاب بخشی از متن و کپی کردن آن در کلیپ بورد به کاربر پیشنهاد دهید.

زمانی که آن را با Selection API ترکیب کنید تا متنی را به صورت برنامه‌نویسی انتخاب کنید تا مشخص کنید چه چیزی در کلیپ بورد کپی می‌شود، بسیار مفید می‌شود، که در ادامه این مقاله با جزئیات بیشتر به آن خواهیم پرداخت.

مثال ساده

به عنوان مثال، اجازه دهید دکمه ای اضافه کنیم که آدرس ایمیل را در کلیپ بورد کاربر کپی می کند.

ما آدرس ایمیل را در HTML خود با یک دکمه اضافه می کنیم تا وقتی روی آن کلیک می شود، کپی شروع شود:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

سپس در جاوا اسکریپت خود، می خواهیم یک کنترل کننده رویداد کلیک به دکمه خود اضافه کنیم که در آن متن آدرس ایمیل را از لنگر js-emaillink انتخاب می کنیم، یک دستور کپی را اجرا می کنیم تا آدرس ایمیل در کلیپ بورد کاربر باشد و سپس انتخاب را از حالت انتخاب خارج می کنیم. آدرس ایمیل تا کاربر نبیند که انتخاب اتفاق افتاده است.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

کاری که ما در اینجا انجام می دهیم این است که از یک متد Selection API ، window.getSelection() استفاده می کنیم تا به صورت برنامه نویسی "انتخاب" متن را روی لنگر تنظیم کنیم، که متنی است که می خواهیم در کلیپ بورد کاربر کپی کنیم. پس از فراخوانی ()document.execCommand، می توانیم با فراخوانی () window.getSelection().removeAllRanges، انتخاب را حذف کنیم. اگر می‌خواهید تأیید کنید که همه چیز طبق انتظار انجام شده است، می‌توانید پاسخ document.execCommand(); اگر فرمان پشتیبانی یا فعال نشود، false را برمی گرداند. ما execCommand() را در یک try و catch قرار می دهیم زیرا دستورات 'cut' و 'copy' می توانند در چند سناریو خطا ایجاد کنند .

دستور 'cut' را می توان برای فیلدهای متنی که می خواهید محتوای متنی را حذف کرده و از طریق کلیپ بورد در دسترس قرار دهید استفاده شود.

با استفاده از یک ناحیه متنی و یک دکمه در HTML ما:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

برای برش محتوا می توانیم کارهای زیر را انجام دهیم:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

    try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to cut');
    }
});

queryCommandSupported و queryCommandEnabled

قبل از فراخوانی document.execCommand() ، باید مطمئن شوید که این API با استفاده از متد document.queryCommandSupported () پشتیبانی می شود. در مثال بالا ما می‌توانیم وضعیت غیرفعال کردن دکمه را بر اساس پشتیبانی مانند این تنظیم کنیم:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

تفاوت بین document.queryCommandSupported() و document.queryCommandEnabled() این است که برش و کپی را می توان توسط یک مرورگر پشتیبانی کرد، اما اگر متنی در حال حاضر انتخاب نشده باشد، فعال نخواهند شد. این در سناریوهایی مفید است که انتخاب متن را به صورت برنامه‌نویسی تنظیم نمی‌کنید و می‌خواهید اطمینان حاصل کنید که دستور طبق انتظار انجام می‌شود، در غیر این صورت پیامی را به کاربر ارائه دهید.

پشتیبانی مرورگر

IE 10+، Chrome 43+، Firefox 41+ و Opera 29+ از این دستورات پشتیبانی می کنند.

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

اشکالات شناخته شده

• فراخوانی queryCommandSupported() از ابزارهای توسعه همیشه false برمی‌گردد .
• در حال حاضر برش فقط زمانی کار می کند که متن را به صورت برنامه نویسی انتخاب کنید .