IE10 trở lên đã hỗ trợ thêm các lệnh "cut" và "copy" thông qua phương thức Document.execCommand(). Kể từ Chrome phiên bản 43, những lệnh này cũng được hỗ trợ trong Chrome.
Mọi văn bản được chọn trong trình duyệt khi một trong các lệnh này được thực thi sẽ được 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 rồi sao chép phần đó vào bảng nhớ tạm.
Cách này cực kỳ hữu ích khi bạn kết hợp API này 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 ở phần sau của bài viết này.
Ví dụ đơn giản
Ví dụ: hãy thêm một nút giúp sao chép địa chỉ email vào bảng nhớ tạm của người dùng.
Chúng ta thêm địa chỉ email vào HTML bằng một nút để bắt đầu sao chép khi nút đó đượ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 vào nút, trong đó chúng ta sẽ chọn văn bản địa chỉ email từ điểm neo js-emaillink, thực thi lệnh sao chép để địa chỉ email nằm trong bảng nhớ tạm của người dùng. Sau đó, chúng ta bỏ chọn địa chỉ email để người dùng không thấy lựa chọn xảy ra.
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();
});
Việc chúng ta đang làm ở đây là sử dụng một phương thức của Selection API (API lựa chọn), window.getSelection() để đặt "lựa chọn" văn bản thành neo, tức là văn bản 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 bằng cách gọi window.getSelection().removeAllRanges(). Nếu muốn xác nhận mọi thứ đều hoạt động như mong đợi, bạn có thể kiểm tra phản hồi của document.execCommand(); hàm này sẽ trả về giá trị false nếu lệnh không được hỗ trợ hoặc bật. Chúng ta gói execCommand() trong một try và catch vì các lệnh "cut" và "copy" có thể gửi lỗi trong một số trường hợp.
Bạn có thể 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 textarea 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 nút bị vô hiệu hoá dựa trên tính năng hỗ trợ như sau:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
Sự khác biệt giữa document.queryCommandSupported() và document.queryCommandEnabled() là trình duyệt có thể hỗ trợ thao tác cắt và sao chép, nhưng nếu hiện không có văn bản nào được chọn, các văn bản đó sẽ không được bật. Điều này rất hữu ích trong các trường hợp bạn 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+, 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.