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

  lang="en"> 

  
 charset="UTF-8" />  
 http-equiv="X-UA-Compatible" content="IE=edge" />  
 name="viewport" content="width=device-width, initial-scale=1.0" /> Copy to clipboard  

With textarea

Without textarea

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') } 

function handleCopyTextFromArea() { const area = document.querySelector('#clipboard-area') area.select(); document.execCommand('copy') } 

Phươ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') } 

Nế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

1. Tạo phần tử

   function handleCopyTextFromArea() { const area = document.querySelector('#clipboard-area') area.select(); document.execCommand('copy') } 

   2 và thêm nó vào DOM
2. Đ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
3. Sử dụng phương pháp

   function handleCopyTextFromArea() { const area = document.querySelector('#clipboard-area') area.select(); document.execCommand('copy') } 

   5 ở trên để sao chép nội dung văn bản
4. 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') } 

Phươ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') } 

function 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') } 

CẬ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ó

Làm cách nào để sao chép văn bản vào khay nhớ tạm bằng JavaScript?

Làm cách nào để sao chép biến vào clipboard JavaScript?

Làm cách nào để sao chép giá trị hộp văn bản vào khay nhớ tạm trong JavaScript?

Làm cách nào để sao chép nội dung div vào khay nhớ tạm bằng JavaScript?

Reply 3 0 Chia sẻ

Bài Viết Liên Quan

Ab 2023 đen bóng

Hướng dẫn what is included in godaddy managed wordpress? - những gì được bao gồm trong wordpress được quản lý bởi godaddy?

Hướng dẫn how do you add an element to a matrix in python? - làm thế nào để bạn thêm một phần tử vào ma trận trong python?

Hướng dẫn what will be the output of the following python function len((hello,2, 4, 6)) - đầu ra của hàm python sau đây sẽ là gì len((hello,2, 4, 6))

Hướng dẫn how does ajax work with php? - ajax hoạt động như thế nào với php?

Hướng dẫn python outlook email received date - ngày nhận email triển vọng python

Hướng dẫn wavelet packet transform python - chuyển đổi gói wavelet python

Hướng dẫn dùng def hello python

Hướng dẫn return all the duplicate values from list of arraylist in python - trả về tất cả các giá trị trùng lặp từ danh sách danh sách mảng trong python

2023 Kia Forte GT review

Bẫy chào mào 2023

Hướng dẫn child theme wordpress la gì - theme con wordpress là gì

Hướng dẫn install wordpress nginx - cài wordpress nginx

Cách tạo read more wordpress

Hướng dẫn how do you copy and paste text in python? - làm cách nào để sao chép và dán văn bản trong python?

Hướng dẫn excel extract text before character - trích xuất văn bản excel trước ký tự

Tử vi ngày 9 tháng 6 năm 2023

Hướng dẫn form action php function - biểu mẫu hành động chức năng php

Hướng dẫn if i is a multiple of 3 and 5 print fizzbuzz python - nếu tôi là bội số của 3 và 5 print fizzbuzz python

Hướng dẫn divide a list python - chia danh sách python

Chúng tôi

• Giới thiệu
• Liên hệ
• Tuyển dụng
• Quảng cáo

Điều khoản

• Điều khoản hoạt động
• Điều kiện tham gia
• Quy định cookie

Trợ giúp

• Hướng dẫn
• Loại bỏ câu hỏi
• Liên hệ

Mạng xã hội

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Bản quyền © 2021 Học Tốt Inc.