Sao chép văn bản vào khay nhớ tạm không khó. Không cần phải thực hiện hàng chục bước để định cấu hình hoặc tải hàng trăm KB. Nhưng trên hết, nó không nên phụ thuộc vào Flash hay bất kỳ framework cồng kềnh nào
Đó là lý do tại sao khay nhớ tạm. js tồn tại
Bạn có thể lấy nó trên npm
npm install clipboard --save
Hoặc nếu bạn không thích quản lý gói, chỉ cần tải xuống tệp ZIP
Đầu tiên, bao gồm tập lệnh nằm trong thư mục dist
hoặc tải tập lệnh từ nhà cung cấp CDN bên thứ ba
Bây giờ, bạn cần khởi tạo nó bằng , , hoặc
new ClipboardJS['.btn'];
Trong nội bộ, chúng tôi cần tìm nạp tất cả các phần tử phù hợp với bộ chọn của bạn và đính kèm trình xử lý sự kiện cho từng phần tử. Nhưng đoán xem?
Vì lý do này, chúng tôi sử dụng ủy quyền sự kiện thay thế nhiều người nghe sự kiện chỉ bằng một người nghe. Xét cho cùng, #perfmatters
Chúng tôi đang sống trong thời kỳ phục hưng khai báo, đó là lý do tại sao chúng tôi quyết định tận dụng các thuộc tính dữ liệu HTML5 để có khả năng sử dụng tốt hơn
Sao chép văn bản từ phần tử khác
Một trường hợp sử dụng khá phổ biến là sao chép nội dung từ một phần tử khác. Bạn có thể làm điều đó bằng cách thêm thuộc tính data-clipboard-target
vào phần tử kích hoạt của mình
Giá trị bạn đưa vào thuộc tính này cần phải khớp với bộ chọn phần tử của người khác
Cắt văn bản từ phần tử khác
Ngoài ra, bạn có thể xác định thuộc tính data-clipboard-action
để chỉ định nếu bạn muốn nội dung copy
hoặc cut
Sao chép dữ liệu từ trình duyệt vào clipboard của bạn là một tính năng nhỏ nhưng khá mạnh mẽ. Không còn lựa chọn thủ công & crtl + c
sẽ tiết kiệm một chút thời gian khi theo dõi các bài viết viết mã lớn hơn. Tôi vừa mới thêm ký hiệu clipboard nhỏ bên cạnh tất cả các đoạn trích của mình để thuận tiện cho người đọc. Đọc để tìm hiểu làm thế nào tôi đã làm nó
bản mẫu
Tạo tệp index.html
, cũng như tệp main.js
trong thư mục bạn chọn. Điền vào chỉ mục - điền thông tin sau và bắt đầu
Copy to clipboard
With textarea
Copy text
Without textarea
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Copy text
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng tôi sẽ có hai chức năng được gắn vào các nút -
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
0 vàfunction handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
1 - hãy lấp đầy chúng bằng cuộc sốngPhương pháp 1. execCommand['bản sao']
Mặc dù chức năng của phương pháp này không được dùng nữa theo tài liệu MDN, nhưng nó vẫn hoạt động tốt với thẻ html
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
2 -. Và ngay cả khi bạn không có sẵn như vậy, việc tạo nó - và điền giá trị của nó bằng nội dung văn bản mong muốn - được thực hiện rất nhanh chóngNếu bạn có sẵn một vùng văn bản, hãy thêm phần sau vào index.html
của bạn
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn không có phần tử đã nói theo ý của mình, bạn chỉ có thể thêm phần tử đó trong thời gian sao chép diễn ra. Các bước dưới đây thường diễn ra nhanh chóng, người dùng sẽ không nhận thấy thẻ bổ sung được thêm và xóa lại
- Tạo phần tử
2 và thêm nó vào DOMfunction handleCopyTextFromArea[] { const area = document.querySelector['#clipboard-area'] area.select[]; document.execCommand['copy'] }
- Điền vào giá trị của nó bằng văn bản từ đoạn văn - hoặc bất kỳ phần tử nào khác
- Sử dụng phương pháp
5 ở trên để sao chép nội dung văn bảnfunction handleCopyTextFromArea[] { const area = document.querySelector['#clipboard-area'] area.select[]; document.execCommand['copy'] }
- Xóa phần tử một lần nữa
function handleCopyTextFromParagraph[] {
const body = document.querySelector['body'];
const paragraph = document.querySelector['p'];
const area = document.createElement['textarea'];
body.appendChild[area];
area.value = paragraph.innerText;
area.select[];
document.execCommand['copy'];
body.removeChild[area];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bây giờ bạn thử và
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
6 vào vùng văn bản bên phải, bạn sẽ thấy đầu vào được dán. Mặc dù cách tiếp cận này vẫn hoạt động rất tốt, nhưng các trình duyệt hiện đại đã triển khai các giao diện riêng của chúng để xử lý các tính năng của khay nhớ tạm. Chúng ta hãy xem điều đó tiếp theoPhương pháp 2. API bảng nhớ tạm
API bảng tạm là một cách tiếp cận hiện đại, dựa trên lời hứa chỉ tập trung vào bảng tạm thay vì thực hiện nhiều việc cùng một lúc. Nó yêu cầu bạn cho phép và chỉ hoạt động trên https, làm cho nó an toàn hơn theo thiết kế. Theo Tôi có thể sử dụng không, các trình duyệt cũ hơn không hỗ trợ chức năng này, do đó, bạn cũng có thể cân nhắc sử dụng giải pháp thay thế
Hãy thay thế hàm
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
1 ở trên bằng hàm saufunction handleCopyTextFromParagraph[] {
const cb = navigator.clipboard;
const paragraph = document.querySelector['p'];
cb.writeText[paragraph.innerText].then[[] => alert['Text copied']];
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Và đó là về nó, thực sự. Bạn có thể muốn thay thế cuộc gọi lại
function handleCopyTextFromArea[] {
const area = document.querySelector['#clipboard-area']
area.select[];
document.execCommand['copy']
}
8 - bằng một số loại phản hồi của người dùng gọn gàng hơn và kiểm tra sự cho phép của người dùng, vẫn - đạt được mục tiêu - văn bản có sẵn và sẵn sàng để phân tích cú phápCẬP NHẬT. Sao chép vào clipboard với chỉ thị Vue 3
Nếu bạn đang sử dụng Vue. js để xây dựng ứng dụng của mình, bạn có thể bọc chức năng trên bằng chỉ thị tùy chỉnh Vue. Sau đó, bạn đạt được chức năng tương tự bằng cách nhấp vào [hoặc tương tác theo bất kỳ cách nào khác với] thành phần có v-clip liên kết với nó