ตัดและคัดลอกคำสั่ง

IE10 ขึ้นไปรองรับคําสั่ง "ตัด" และ "คัดลอก" ผ่านเมธอด Document.execCommand() Chrome เวอร์ชัน 43 รองรับคำสั่งเหล่านี้ด้วย

ระบบจะตัดหรือคัดลอกข้อความที่เลือกในเบราว์เซอร์เมื่อเรียกใช้คําสั่งใดคําสั่งหนึ่งเหล่านี้ไปยังคลิปบอร์ดของผู้ใช้ ซึ่งจะช่วยให้คุณนำเสนอวิธีง่ายๆ ในการคัดลอกข้อความบางส่วนไปยังคลิปบอร์ดให้แก่ผู้ใช้

ซึ่งจะมีประโยชน์อย่างยิ่งเมื่อคุณใช้ร่วมกับ 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(); ซึ่งจะแสดงผลเป็นเท็จหากระบบไม่รองรับหรือเปิดใช้คำสั่ง เรารวม execCommand() ไว้ใน try และ catch เนื่องจากคำสั่ง "ตัด" และ "คัดลอก" อาจแสดงข้อผิดพลาดในบางสถานการณ์

คำสั่ง "ตัด" สามารถใช้กับช่องข้อความที่ต้องการนำเนื้อหาข้อความออกและทำให้เข้าถึงได้ผ่านคลิปบอร์ด

การใช้ textarea และปุ่มใน 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 ขึ้นไปรองรับคําสั่งเหล่านี้

Safari ไม่รองรับคำสั่งเหล่านี้

ข้อบกพร่องที่ทราบ

• การเรียก queryCommandSupported() จากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะแสดงผลลัพธ์เป็นเท็จเสมอ
• ขณะนี้การคัดลอกจะใช้งานได้เมื่อคุณเลือกข้อความแบบเป็นโปรแกรมเท่านั้น