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

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

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

การใช้พื้นที่ข้อความและปุ่มใน 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 เสมอ
• ตอนนี้ฟีเจอร์การตัดจะทำงานเมื่อคุณเลือกข้อความแบบเป็นโปรแกรมเท่านั้น