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

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

คำสั่ง "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 ขึ้นไปรองรับคําสั่งเหล่านี้

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

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

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