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

Matt Gaunt

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

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

ซึ่งจะมีประโยชน์อย่างยิ่งเมื่อคุณรวมกับ Selection API เพื่อเลือกข้อความโดยใช้โปรแกรมเพื่อพิจารณาว่าจะคัดลอกข้อความใดไปยังคลิปบอร์ด ซึ่งเราจะดูรายละเอียดเพิ่มเติมภายหลังในบทความนี้

ตัวอย่างง่ายๆ

เช่น เราจะเพิ่มปุ่มที่คัดลอกอีเมลไปยังคลิปบอร์ดของผู้ใช้

เราจะเพิ่มที่อยู่อีเมลใน HTML ของเราโดยมีปุ่มสำหรับให้เริ่มคัดลอกเมื่อมีการคลิก ดังนี้

<p>Email me at <a class="js-emaillink" href="mailto:[e-mail]">[e-mail]</a></p>

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

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

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

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

การสนับสนุนเบราว์เซอร์

IE 10+, Chrome 43+, Firefox 41+ และ Opera 29+ รองรับคำสั่งเหล่านี้

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

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

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