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

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, các 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 và sao chép phần văn bản đó vào bảng nhớ tạm.

Điều này trở nên cực kỳ hữu ích khi bạn kết hợp với 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 về API này ở phần sau của bài viết.

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 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 của mình, trong đó chúng ta chọn văn bản địa chỉ email từ 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() để thiết lập "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ứ 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ể sử dụng lệnh "cut" (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à truy cập nội dung đó thông 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');

Điểm 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 không có văn bản nào được chọn thì các tính năng này sẽ không được bật. Điều này hữu ích trong các trường hợp bạn không đặt 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ẽ thực hiện như mong đợi, nếu không, hãy 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.

Lỗi đã biết