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

أضاف الإصدار 10 من Internet Explorer والإصدارات الأحدث ميزة تتيح استخدام الأمرَين "قطع" و"نسخ" من خلال الأسلوب 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>

بعد ذلك، نريد إضافة معالِج أحداث النقر إلى الزر في JavaScript لاختيار نص عنوان البريد الإلكتروني من علامة الربط 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' و'copy' قد يؤديان إلى حدوث خطأ في عدد قليل من السيناريوهات.

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

باستخدام نص عادي وزر في ملف 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() من أدوات مطوّري البرامج دائمًا إلى عرض القيمة "خطأ".
• في الوقت الحالي، لا يعمل القص إلا عند تحديد النص آليًا.