IE10 trở lên đã thêm tính năng hỗ trợ cho các lệnh "cắt" và "sao chép" thông qua phương thức Document.execCommand(). Kể từ phiên bản Chrome 43, các lệnh này cũng được hỗ trợ trong Chrome.
Mọi văn bản đã chọn trong trình duyệt khi một trong các lệnh này được thực thi sẽ bị cắt hoặc sao chép vào bảng nhớ tạm của người dùng. Điều này cho phép bạn cung cấp cho người dùng một cách đơn giản để chọn một phần văn bản và sao chép phần đó vào bảng nhớ tạm.
Tính năng này trở nên cực kỳ hữu ích khi bạn kết hợp với Selection API (API Lựa chọn) để chọn văn bản theo phương thức lập trình nhằm xác định nội dung được sao chép vào bảng nhớ tạm. Chúng ta sẽ xem xét chi tiết hơn điều này sau trong bài viết này.
Ví dụ đơn giản
Ví dụ: hãy thêm một nút để sao chép địa chỉ email vào bảng nhớ tạm của người dùng.
Chúng tôi thêm địa chỉ email vào HTML cùng với một nút để bắt đầu sao chép khi được nhấp vào:
<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>
Sau đó, trong JavaScript, chúng ta muốn thêm một trình xử lý sự kiện nhấp chuột vào nút để chọn văn bản địa chỉ email từ liên kết js-emaillink, thực thi một lệnh sao chép để địa chỉ email nằm trong bảng nhớ tạm của người dùng, sau đó bỏ chọn địa chỉ email để người dùng không nhìn thấy lựa chọn này.
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();
});
Những gì chúng ta đang làm ở đây là sử dụng phương thức của Selection API, window.getSelection() để đặt "lựa chọn" văn bản thành liên kết theo phương thức lập trình, là văn bản mà chúng ta muốn sao chép vào bảng nhớ tạm của người dùng. Sau khi gọi document.execCommand(), chúng ta có thể xoá lựa chọn này bằng cách gọi window.getSelection().removeAllRanges(). Nếu muốn xác nhận mọi thứ hoạt động như mong đợi, bạn có thể kiểm tra phản hồi của document.execCommand() và trả về false nếu lệnh này không được hỗ trợ hoặc bật. Chúng tôi bao bọc execCommand() trong lệnh try và catch do lệnh "cut" và "copy" có thể tạo ra lỗi trong một vài trường hợp.
Bạn có thể sử dụng lệnh "cắt" cho các trường văn bản mà bạn muốn xoá nội dung văn bản và cho phép truy cập nội dung đó qua bảng nhớ tạm.
Sử dụng vùng văn bản và nút trong HTML:
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>
Chúng ta có thể làm như sau để cắt nội dung:
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 và queryCommandEnabled
Trước khi gọi document.execCommand(), bạn nên đảm bảo rằng API này được hỗ trợ bằng cách sử dụng phương thức document.queryCommandSupported(). Trong ví dụ trên, chúng ta có thể đặt trạng thái cho nút là tắt dựa trên sự hỗ trợ như sau:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
Sự khác biệt giữa document.queryCommandSupported() và document.queryCommandEnabled() là tính năng cắt và sao chép có thể được trình duyệt hỗ trợ, nhưng nếu không có văn bản nào được chọn thì hệ thống sẽ không bật tính năng cắt và sao chép. Điều này hữu ích trong các trường hợp không thiết lập lựa chọn văn bản theo phương thức lập trình và muốn đảm bảo lệnh sẽ hoạt động như mong đợi, nếu không sẽ hiển thị thông báo cho người dùng.
Hỗ trợ trình duyệt
IE 10 trở lên, Chrome 43 trở lên, Firefox 41 trở lên và Opera 29 trở lên hỗ trợ các lệnh này.
Safari không hỗ trợ các lệnh này.