قص الأوامر ونسخها

الإصدار IE10 والإصدارات الأحدث يدعم "الاقتصاص والدمج". و"نسخ" من خلال Document.execCommand() . وبدءًا من الإصدار 43 من Chrome، أصبحت هذه الأوامر متاحة أيضًا في Chrome.

سيتم تنفيذ أي نص يتم اختياره في المتصفح عند تنفيذ أحد هذه الأوامر قص أو نسخ إلى حافظة المستخدم. يتيح لك هذا تقديم طريقة بسيطة للمستخدم لتحديد جزء من النص ونسخه إلى الحافظة.

ويصبح هذا مفيدًا للغاية عند دمجه مع 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() في محاولة وتعرَّف منذ بدء "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()، يجب التأكد من أنّ واجهة برمجة التطبيقات هذه باستخدام document.queryCommandSupported() . في المثال أعلاه، يمكننا ضبط حالة الزر "غير مفعّل" بناءً على مثل:

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

الفرق بين document.queryCommandSupported() أو document.queryCommandEnabled() أنّ القص والنسخ يمكن أن يتيحهما المتصفح، ولكن إذا لم يتم تحديد أي نص حاليًا، لن يتم تفعيلهما. ويكون هذا مفيدًا في السيناريوهات التي لا تحدد النص آليًا وتريد التأكد من أن الأمر كما هو متوقع، وإلا ستعرض رسالة للمستخدم.

دعم المتصفح

تتوافق الإصدارات الأحدث من IE 10 وChrome 43 وFirefox 41 وOpera 29 والإصدارات الأحدث مع هذه الأوامر.

ولا يدعم Safari هذه الأوامر.

الأخطاء المعروفة

• سيؤدي استدعاء الدالة queryCommandSupported() من أدوات مطوّري البرامج دائمًا إلى عرض القيمة "خطأ".
• في الوقت الحالي، لا يعمل القص إلا عند تحديد النص آليًا.