Cắt và sao chép lệnh

IE10 trở lên đã thêm hỗ trợ cho 'cắt' và "sao chép" thông qua 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 cách đơn giản để chọn một phần văn bản rồi sao chép vào bảng nhớ tạm.

Việc này trở nên cực kỳ hữu ích khi bạn kết hợp API này với Selection API để chọn văn bản theo phương thức lập trình để xác định nội dung nào được sao chép vào bảng nhớ tạm. chúng ta sẽ xem xét kỹ hơn 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 ta thêm địa chỉ email vào HTML bằng một nút để bắt đầu sao chép khi người dùng nhấp vào địa chỉ đó:

<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 tôi muốn thêm trình xử lý sự kiện nhấp chuột vào nút trong chúng ta chọn văn bản địa chỉ email từ liên kết js-emaillink, thực thi một bản sao sao cho đị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 đó.

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 pháp của API Chọn, window.getSelection() để thiết lập 'lựa chọn' bằng cách lập trình vào văn bản liên kết, chính là văn bản mà chúng tôi 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 tôi có thể xoá lựa chọn bằng cách gọi window.getSelection().removeAllRanges(). Nếu muốn xác nhận rằng mọi thứ hoạt động như mong đợi, bạn có thể kiểm tra phản hồi của document.execCommand(); nó sẽ trả về false nếu lệnh không phải là được hỗ trợ hoặc được bật. Chúng ta gói execCommand() trong một thử và bắt từ lệnh 'cắt' và "sao chép" các lệnh có thể tạo ra lỗi trong một vài trường hợp.

"Cắt" có thể dùng lệnh này cho trường văn bản mà bạn muốn xoá văn bản và làm cho nội dung đó có thể truy cập được qua bảng nhớ tạm.

Sử dụng vùng văn bản và một nút trong HTML của chúng tôi:

<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 cần đảm bảo rằng API này được hỗ trợ bằng cách sử dụng 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 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ợ tính năng cắt và sao chép nhưng nếu bạn không chọn văn bản nào thì tính năng này sẽ không được bật. Điều này sẽ hữu ích trong những trường hợp bạn không có thiết lập việc 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 thì hiển thị một 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.

Lỗi đã biết