IE10 ขึ้นไปเพิ่มการรองรับคำสั่ง "ตัด" และ "คัดลอก" ผ่านเมธอด 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 เราจะเพิ่มเครื่องจัดการกิจกรรมการคลิกลงในปุ่ม เพื่อให้เราเลือกข้อความอีเมลจากแท็ก 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 ไม่รองรับคำสั่งเหล่านี้