Ngày xuất bản: 23 tháng 9 năm 2025
Sự kiện clipboardchange là một tính năng mới do nhóm Microsoft Edge thêm vào Chrome. Điều này giúp bạn theo dõi hiệu quả các thay đổi trên bảng nhớ tạm mà không bị hao tổn hiệu suất do việc thăm dò.
Giờ đây, bạn có thể kiểm thử sự kiện clipboardchange bằng một bản dùng thử theo nguyên gốc trong cả Chrome và Edge, bắt đầu từ phiên bản 140.
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn trong quá trình thử nghiệm tính năng mới này vì chúng tôi hy vọng có thể chuẩn hoá tính năng này.
Những thách thức khi thăm dò bảng nhớ tạm để phát hiện các thay đổi
Để biết nội dung có trong bảng nhớ tạm của hệ thống, bạn phải sử dụng các phương thức thăm dò không hiệu quả. Ví dụ: các ứng dụng web chỉnh sửa văn bản có thể muốn bật các nút "Dán" khác nhau dựa trên việc bảng nhớ tạm có chứa văn bản, hình ảnh hay nội dung HTML hay không.
Phương pháp hiện tại để đạt được điều này yêu cầu bạn gọi lặp lại phương thức navigator.clipboard.read() để kiểm tra nội dung trong bảng nhớ tạm, như minh hoạ trong đoạn mã sau:
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
Mặc dù cách này có hiệu quả, nhưng cũng có những nhược điểm đáng kể.
Tác động đến hiệu suất
Việc liên tục thăm dò bảng nhớ tạm sẽ tạo ra mức hao tổn không cần thiết. Mỗi lệnh gọi đến navigator.clipboard.read() đều yêu cầu quyền truy cập vào bảng nhớ tạm ở cấp hệ thống. Điều này có thể ảnh hưởng tiêu cực đến hiệu suất của ứng dụng, đặc biệt là trên các thiết bị bị hạn chế về tài nguyên. Tần suất thăm dò ý kiến trở thành sự đánh đổi giữa khả năng phản hồi và hiệu suất.
Tiêu hao pin
Trên thiết bị di động, việc thường xuyên thăm dò bảng nhớ tạm có thể góp phần làm tiêu hao pin vì ứng dụng liên tục truy cập vào tài nguyên hệ thống ngay cả khi người dùng không chủ động sao chép hoặc dán nội dung.
Trải nghiệm người dùng không nhất quán
Khoảng thời gian thăm dò tạo ra độ trễ giữa thời điểm nội dung được sao chép và thời điểm giao diện người dùng cập nhật để phản ánh trạng thái mới của bảng nhớ tạm. Người dùng có thể thấy trạng thái nút dán đã lỗi thời hoặc gặp phải tình trạng trong thời gian ngắn không có các lựa chọn chính xác.
Vấn đề về quyền riêng tư khi bỏ phiếu quá nhiều
Việc thường xuyên truy cập vào bảng nhớ tạm có thể làm dấy lên lo ngại về quyền riêng tư, vì các ứng dụng liên tục đọc dữ liệu trong bảng nhớ tạm ngay cả khi dữ liệu đó không thay đổi. Điều này có thể gây khó chịu cho những người dùng quan tâm đến quyền riêng tư đối với nội dung trong bảng nhớ tạm của họ.
Sự kiện clipboardchange
Để giải quyết những thách thức này, chúng tôi đã triển khai một sự kiện mới có tên là clipboardchange và đang triển khai một bản dùng thử theo nguồn gốc trong cả Edge và Chrome, để bạn có thể kiểm thử sự kiện này trong các ứng dụng của mình.
Sự kiện này cho phép các ứng dụng web phản ứng với các thay đổi trên bảng nhớ tạm một cách thụ động thay vì chủ động thăm dò các thay đổi đó. Sự kiện này tự động kích hoạt khi nội dung được sao chép hoặc cắt vào bảng nhớ tạm từ bất kỳ ứng dụng nào, bảng nhớ tạm bị xoá hoặc nội dung được dán (trong một số trường hợp, thao tác này có thể xoá bảng nhớ tạm). Sự kiện này chỉ kích hoạt khi tài liệu có tiêu điểm.
Bạn có thể theo dõi sự kiện clipboardchange bằng cách thêm một trình nghe vào giao diện navigator.clipboard như minh hoạ ở đây:
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
Ưu điểm chính
Sự kiện clipboardchange mang lại một số lợi ích so với việc thăm dò ý kiến:
- Hiệu quả: Các sự kiện chỉ được kích hoạt khi có thay đổi thực sự xảy ra.
- Bảo đảm quyền riêng tư: Sự kiện này chỉ hiển thị các loại MIME gốc, chứ không hiển thị nội dung thực tế.
- Không có lời nhắc về quyền: Vì không có dữ liệu nhạy cảm nào bị lộ, nên không cần có quyền của người dùng.
- Khả năng phản hồi theo thời gian thực: Giao diện người dùng cập nhật ngay lập tức khi nội dung trong bảng nhớ tạm thay đổi.
- Nhận biết tiêu điểm: Các sự kiện chỉ kích hoạt khi tài liệu có tiêu điểm.
Thuộc tính types
Đối tượng sự kiện clipboardchange bao gồm một thuộc tính types. Thuộc tính này chứa một mảng các loại MIME có trong bảng tạm:
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
Hành vi lấy tiêu điểm
Nếu nội dung trong bảng tạm thay đổi trong khi tài liệu không được lấy tiêu điểm, thì một sự kiện clipboardchange duy nhất sẽ được kích hoạt khi tài liệu lấy lại tiêu điểm hệ thống.
Thông tin về các thay đổi trước đây đối với bảng nhớ tạm sẽ không có sẵn, chỉ những loại có sẵn khi trang lấy tiêu điểm mới được đưa vào thành phần types.
Kiểm thử sự kiện clipboardchange ngay hôm nay
Bạn có thể kiểm thử sự kiện clipboardchange mới ngay hôm nay:
- Theo cách cục bộ, bằng cách chỉ bật tính năng này trong trình duyệt của bạn.
- Hoặc trên ứng dụng web chính thức của bạn, bằng cách đăng ký thử nghiệm nguồn gốc.
Phát hiện sự kiện clipboardchange để có khả năng tương thích tốt hơn
Trước tiên, vì đây là một tính năng mới, nên bạn cần phát hiện xem thiết bị có hỗ trợ tính năng này hay không trước khi sử dụng. Bạn có thể thực hiện việc này bằng cách kiểm thử sự tồn tại của thuộc tính onclipboardchange trên navigator.clipboard, như minh hoạ ở đây:
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
Kiểm thử cục bộ
Cách kiểm thử sự kiện clipboardchange chỉ trong trình duyệt:
- Mở trang
about://flags. - Tìm
ClipboardChangeEventtrong hộp Tìm cờ. - Sử dụng trình đơn thả xuống và thay đổi giá trị từ Mặc định thành Đã bật.
- Khởi động lại trình duyệt.
Đăng ký dùng thử ban đầu
Để dùng thử sự kiện clipboardchange trên trang web của bạn với người dùng thực, hãy đăng ký dùng thử nguồn gốc trong Chrome hoặc Edge.
Bản dùng thử theo nguyên gốc sẽ chạy trong Chrome và Edge từ phiên bản 140 đến 142 (từ ngày 2 tháng 9 năm 2025 đến ngày 2 tháng 12 năm 2025).
Hãy đọc bài viết Bắt đầu dùng thử nguồn gốc để tìm hiểu thêm về các bản dùng thử nguồn gốc và cách bắt đầu
Bản minh hoạ
Để xem sự kiện này hoạt động, hãy khám phá bản minh hoạ của chúng tôi và xem mã nguồn trên GitHub.
Bản minh hoạ này cho thấy cách sử dụng sự kiện clipboardchange để tạo một giao diện dán thích ứng, tự động cập nhật dựa trên nội dung trong bảng nhớ tạm của bạn.
Hãy thử sao chép nhiều loại nội dung (văn bản, hình ảnh, HTML) và xem cách các nút dán bật và tắt theo thời gian thực mà không cần bất kỳ hoạt động thăm dò nào!
Phản hồi
Chúng tôi rất mong bạn chia sẻ về cách sự kiện clipboardchange hoạt động trong các trường hợp sử dụng của bạn. Đưa ra ý kiến phản hồi bằng cách tạo một vấn đề tại kho lưu trữ W3C/clipboard-apis.
Các tín hiệu công khai về mối quan tâm của bạn sẽ giúp chúng tôi và các trình duyệt khác hiểu được tầm quan trọng của tính năng này đối với bạn, từ đó có thể cung cấp thông tin cho quy trình tiêu chuẩn hoá.
Ngay cả khi sự kiện này có thể được dùng làm một tính năng nâng cao tăng dần, chúng tôi vẫn muốn chuẩn hoá sự kiện này trong quy cách Clipboard API và cuối cùng là thấy sự kiện này được tất cả các trình duyệt áp dụng. Hiện tại, bạn có thể quay lại sử dụng phương pháp thăm dò hoặc các kỹ thuật giám sát bảng nhớ tạm khác.