programming javascript

Dán JavaScript từ khay nhớ tạm

Tôi đã thực hiện một số bài viết về cách sao chép văn bản vào khay nhớ tạm trong JavaScript bằng API Clipboard hoặc execCommand

Nhưng chúng tôi chưa bao giờ xem làm thế nào chúng tôi có thể dán thông tin từ khay nhớ tạm bằng một lần bấm nút

Gần đây, có người đã hỏi tôi cách thực hiện việc này trên Twitter, vì vậy, đây là bài viết dành riêng cho bạn về cách dán văn bản vào khay nhớ tạm của bạn

Văn bản dán JavaScript từ khay nhớ tạm

Vấn đề chính với tính năng này là chúng tôi cần sự cho phép từ trình duyệt để đọc dữ liệu này

Vì vậy, trong lần thử đầu tiên, người dùng sẽ được nhắc với một cửa sổ bật lên như thế này

Hãy lấy bản demo clipboard hiện có của chúng tôi và làm cho trường dán tương tác

Trong bản trình diễn của chúng tôi, bạn sẽ có thể nhấp vào vùng văn bản trên cùng, thao tác này sẽ sao chép văn bản vào khay nhớ tạm

Khi người dùng nhấp vào trường dưới cùng, nó sẽ tự động dán nó

Trước tiên, chúng ta cần gán trường này cho một biến và đính kèm trình xử lý nhấp chuột

const paste = document.getElementById['paste'];
paste.addEventListener['click', [] => {
  // Do our action
}];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thao tác dán thực tế của chúng tôi cực kỳ đơn giản và trông như thế này

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sử dụng API clipboard và gọi hàm

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

5. Nó sẽ cung cấp cho chúng tôi giá trị hiện tại mà chúng tôi có thể đặt trên trường dán của mình

Bạn có thể dùng thử trên CodePen sau

Hỗ trợ trình duyệt cho Clipboard API

Sự hỗ trợ cho Clipboard API đã được cải thiện rất nhiều trong vài tháng qua và tất cả các phiên bản mới nhất dường như đều hỗ trợ đầy đủ

Cảm ơn bạn đã đọc, và chúng ta hãy kết nối

Cảm ơn bạn đã đọc blog của tôi. Vui lòng đăng ký nhận bản tin email của tôi và kết nối trên Facebook hoặc Twitter

Cho đến năm 2020, việc triển khai các tùy chọn cắt, sao chép và dán trên nhiều trình duyệt trong các ứng dụng web yêu cầu mã

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

3 đồng bộ phức tạp hiếm khi hoạt động như mong đợi. Điều này hiện không được dùng nữa để ủng hộ API Clipboard không đồng bộ mới. Hỗ trợ nói chung là tốt, mặc dù không phải tất cả các trình duyệt đều hỗ trợ đầy đủ thông số kỹ thuật

Tại sao ứng dụng cần quyền truy cập Clipboard theo chương trình?

Những người có trình độ CNTT vừa phải thường sử dụng phím tắt để cắt, sao chép và dán

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

4 /

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

5 +

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

6 để sao chép

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

4 /

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

5 +

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

9 để cắt

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

4 /

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

5 +

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

12 để dán

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

4 /

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

5 +

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

15 +

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

12 để dán mà không cần định dạng

có lẽ các tùy chọn tương tự để truy cập trình quản lý lịch sử clipboard
nhấn và giữ trên điện thoại thông minh và máy tính bảng

Điều này đặt ra một số vấn đề

Những phím tắt này không nhất thiết phải rõ ràng đối với những người có kinh nghiệm sử dụng máy tính hạn chế
Việc chọn đúng văn bản có thể khó khăn — tất cả chúng ta đã vô tình đánh dấu khoảng trắng không cần thiết khi sao chép mật khẩu và mã truy cập
Làm thế nào để bạn sao chép nội dung phi văn bản như hình ảnh hoặc dữ liệu âm thanh?

Clipboard API cho phép bạn

cung cấp các điều khiển giao diện người dùng như các nút sao chép và dán
xử lý các định dạng văn bản và nhị phân
sửa đổi nội dung khi người dùng kích hoạt các hành động trong khay nhớ tạm

Khủng hoảng Clipboard

Các nhà cung cấp trình duyệt phải xem xét các vấn đề bảo mật khi triển khai API. Khay nhớ tạm của bạn có thể chứa dữ liệu cá nhân hoặc dữ liệu bảo mật, chẳng hạn như tài liệu bí mật hoặc mật khẩu. Do đó, Clipboard API chỉ khả dụng khi trang web

sử dụng HTTPS [hoặc địa chỉ

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

17 trong quá trình phát triển]

nằm trong tab trình duyệt đang hoạt động và không ở trong nền và
chức năng được kích hoạt bởi tương tác của người dùng, chẳng hạn như nhấp chuột

Nếu trang của bạn đang chạy bên trong một

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

18, thì trang mẹ phải đặt quyền đối với khay nhớ tạm rõ ràng

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

Cuối cùng, người dùng có thể thấy lời nhắc về quyền trong một số trình duyệt — thường là lần đầu tiên họ sử dụng chức năng dán

API Quyền cho phép bạn kiểm tra các trạng thái

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

19 và

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

00 và buộc một lời nhắc. Xin lưu ý rằng đây không phải là tiêu chuẩn và chỉ khả dụng trong các trình duyệt dựa trên Chromium [Chrome, Edge, Opera, Brave và Vivaldi]

Phát hiện Hỗ trợ API Clipboard

Bạn có thể phát hiện hỗ trợ API Clipboard bằng cách sử dụng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Điều này xác nhận rằng một số tính năng API khả dụng. Sẽ cần phải kiểm tra thêm các phương pháp cụ thể khi cố gắng thao tác với khay nhớ tạm, ví dụ:. g

navigator.clipboard.readText[].then[[clipText] => [paste.innerText = clipText]];

Viết văn bản vào Clipboard

Để viết bất kỳ văn bản nào vào khay nhớ tạm, hãy sử dụng phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

02 dựa trên Promise

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Mã này ghi văn bản vào khay nhớ tạm khi một phần tử có ID

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

03 được nhấp vào. Trình duyệt kiểm tra tương tác gần đây của người dùng, do đó, tốt nhất là chạy phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

02 trong trình xử lý sự kiện

Bạn có thể viết bất kỳ chuỗi nào vào khay nhớ tạm, nhưng nếu cần, bạn có thể lấy bất kỳ văn bản nào mà người dùng đã chọn trên trang và thao tác với nó khi cần thiết

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Phương pháp

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

02 có hỗ trợ đầy đủ trong hầu hết các trình duyệt hiện đại

Đọc văn bản từ Clipboard

Để đọc nội dung văn bản từ khay nhớ tạm, hãy sử dụng phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

06 dựa trên Promise

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Mã này đọc văn bản từ khay nhớ tạm khi một phần tử có ID

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

07 được nhấp vào. Trình duyệt kiểm tra tương tác gần đây của người dùng, vì vậy, tốt nhất là nên thực thi

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

06 trong một trình xử lý sự kiện

Phương pháp

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

06 có hỗ trợ đầy đủ trong hầu hết các trình duyệt hiện đại

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên, mã nguồn mở cho phép bạn xem những gì người dùng thực hiện trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn.

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí.

Ghi bất kỳ dữ liệu nào vào Clipboard

Phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

80 hỗ trợ tất cả các loại dữ liệu, bao gồm cả nhị phân và văn bản. Tuy nhiên, hỗ trợ trình duyệt bị hạn chế hơn và mã không đơn giản

Một mảng gồm các đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 được truyền cho phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

80. Các đối tượng này được xây dựng bằng cách chuyển một đối tượng có loại MIME làm khóa và dữ liệu thô Blob làm giá trị. Đoạn mã sau tạo một đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 từ một chuỗi văn bản

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Ví dụ sau tạo một đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 từ một hình ảnh được tải bằng Fetch API

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Ví dụ sau tạo một đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 từ một hình ảnh được hiển thị trong phần tử canvas có id

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Giờ đây, bạn có thể ghi [các] đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

87 kết quả vào một mục nhập khay nhớ tạm

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Hãy nhớ trình duyệt kiểm tra tương tác người dùng gần đây, vì vậy mã này thường được chạy trong trình xử lý sự kiện

Đọc bất kỳ dữ liệu nào từ Clipboard

Phương thức

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

88 hỗ trợ tất cả các loại dữ liệu, bao gồm cả nhị phân và văn bản. Một lần nữa, hỗ trợ trình duyệt hạn chế hơn. Nó trả về một mảng gồm các đối tượng

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 mà bạn có thể xử lý theo yêu cầu

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Hãy nhớ trình duyệt kiểm tra tương tác người dùng gần đây, vì vậy mã này thường được chạy trong trình xử lý sự kiện

Sự kiện bảng tạm

Các sự kiện

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

10,

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

11 và

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

12 được kích hoạt khi người dùng tương tác với khay nhớ tạm theo bất kỳ cách nào [phím tắt, nhấn lâu, menu nhấp chuột phải, cuộc gọi

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

88, cuộc gọi

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

80, v.v. ] Mã trình xử lý có thể chặn các sự kiện này và gửi

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

81 của riêng chúng. Ngoài ra, đối tượng sự kiện được chuyển đến trình xử lý cũng cung cấp thuộc tính

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

16 có thể được kiểm tra hoặc sửa đổi khi cần thiết

Ví dụ: bình thường bạn không thể cắt văn bản từ một trang web, nhưng trình xử lý sự kiện sau đây sẽ chuyển đổi một lựa chọn thành văn bản viết hoa, ghi nó vào khay nhớ tạm và xóa nó khỏi tài liệu

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Ví dụ sau chặn việc dán vào trường

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

17 với id là

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

18 và buộc nó phải viết hoa

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

Sự kết luận

API Clipboard dễ sử dụng và hỗ trợ tốt trong tất cả các trình duyệt hiện đại. Điều đó nói lên rằng, có rất nhiều trường hợp khó khăn cần giải quyết và thậm chí các tổ chức có nhiều tài nguyên không phải lúc nào cũng hiểu đúng [thử sao chép hình ảnh từ tài liệu Google Tài liệu sang hệ điều hành cục bộ của bạn. ]

Tôi khuyên bạn nên sử dụng API Clipboard như một chức năng nâng cao khi nó có ý nghĩa thực tế. Ví dụ: một ứng dụng cho phép bạn sao chép mã hình ảnh SVG [XML] có thể hiển thị nó trong khối

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

17 hoặc khối

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

90 với bộ CSS

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

91. Sau đó, có thể sao chép và dán trong tất cả các trình duyệt, kể cả các ứng dụng cũ. Trong các trình duyệt hỗ trợ

if [navigator.clipboard] {
  console.log['Clipboard API available'];
}

92, phần tử đó có thể được ẩn và thay thế bằng một nút duy nhất sao chép mã SVG vào khay nhớ tạm

Cuối cùng, hãy nhớ kiểm tra mã clipboard của bạn trên nhiều trình duyệt trên máy tính để bàn và thiết bị di động bằng chuột, bàn phím và điều khiển cảm ứng

MẸO TỪ NGƯỜI BIÊN TẬP. Để biết thêm về API JavaScript, hãy xem Bốn API web JavaScript tích hợp hữu ích của chúng tôi và sử dụng các bài viết về API JavaScript yêu cầu thanh toán gốc

Làm cách nào để lấy văn bản đã sao chép từ khay nhớ tạm trong JavaScript?

Tạo một vùng văn bản và đặt nội dung của nó thành văn bản bạn muốn sao chép vào khay nhớ tạm

Nối vùng văn bản vào DOM

Chọn văn bản trong vùng văn bản

tài liệu cuộc gọi. execCommand["bản sao"]

Xóa vùng văn bản khỏi dom

Làm cách nào để dán bằng JavaScript?

Sự kiện onpaste .

Example. Execute a JavaScript when pasting some text in an element: .

In HTML: .

Example. Execute a JavaScript when pasting some text in a
element [Note that contenteditable is set to "true"]:.

Làm cách nào để đọc dữ liệu từ khay nhớ tạm bằng JavaScript?

read[] Phương thức read[] của giao diện Clipboard yêu cầu một bản sao nội dung của khay nhớ tạm, gửi dữ liệu đến Promise được trả về khi lời hứa được giải quyết. Không giống như readText[], phương thức read[] có thể trả về dữ liệu tùy ý, chẳng hạn như hình ảnh. Phương thức này cũng có thể trả về văn bản.

Văn bản dán JavaScript từ khay nhớ tạm

Hỗ trợ trình duyệt cho Clipboard API

Cảm ơn bạn đã đọc, và chúng ta hãy kết nối

Tại sao ứng dụng cần quyền truy cập Clipboard theo chương trình?

Khủng hoảng Clipboard

Phát hiện Hỗ trợ API Clipboard

Viết văn bản vào Clipboard

Đọc văn bản từ Clipboard

Phát lại phiên mã nguồn mở

Ghi bất kỳ dữ liệu nào vào Clipboard

Đọc bất kỳ dữ liệu nào từ Clipboard

Sự kiện bảng tạm

Sự kết luận

Làm cách nào để lấy văn bản đã sao chép từ khay nhớ tạm trong JavaScript?

Làm cách nào để dán bằng JavaScript?

Làm cách nào để đọc dữ liệu từ khay nhớ tạm bằng JavaScript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề