Trong bài viết này, chúng ta đã khám phá các kỹ thuật trong JavaScript để sao chép văn bản vào khay nhớ tạm và sử dụng dữ liệu được lưu trữ trong khay nhớ tạm. Điều này liên quan đến việc sử dụng Navigator.clipboard.

Bạn đang xem : phần tử sao chép javascript vào khay nhớ tạm

Tải sách này – & gt; Các vấn đề về mảng: Để phỏng vấn và lập trình cạnh tranh

Trong bài viết này, chúng tôi đã khám phá các kỹ thuật trong JavaScript để sao chép văn bản vào khay nhớ tạm và sử dụng dữ liệu được lưu trữ trong khay nhớ tạm. Điều này liên quan đến việc sử dụng Navigator.clipboard.

Mục lục:

  1. Giới thiệu về khay nhớ tạm
  2. Các trường hợp sử dụng khay nhớ tạm
  3. Kỹ thuật cũ so với kỹ thuật mới trong JavaScript
  4. Sử dụng khay nhớ tạm với JavaScript
    • Navigator.clipboard
    • Navigator.clipboard.writeText
    • Navigator.clipboard.readText
    • Navigator.clipboard.write
    • Navigator.clipboard.read
  5. Kết luận

Hãy để chúng tôi bắt đầu với Sao chép vào khay nhớ tạm trong JavaScript .

Giới thiệu về khay nhớ tạm

Clipboard là một công cụ rất hữu ích khi làm việc trên hệ thống của bạn, nó cho phép bạn chuyển dữ liệu (văn bản, hình ảnh, v.v.) giữa các ứng dụng trên hệ thống của bạn. Trong bối cảnh phát triển web, khay nhớ tạm còn hữu ích hơn nữa trong việc giúp người dùng sao chép một khối văn bản để tham chiếu sau này, lưu hình ảnh và các dữ liệu khác trên hệ thống của họ.

Các trường hợp sử dụng khay nhớ tạm

Một số ví dụ mà khay nhớ tạm hữu ích bao gồm:

  • Sao chép một khối văn bản từ một trang web sang một phần mềm chỉnh sửa văn bản như ms word
  • Hiển thị dữ liệu được sao chép từ các nguồn khác vào ứng dụng web
  • Sao chép các đoạn mã từ một trang web để dùng thử trên hệ thống của bạn.

Kỹ thuật cũ so với kỹ thuật mới trong JavaScript

Sử dụng JavaScript, có hai cách để bạn có thể truy cập vào khay nhớ tạm, đó là:

  1. Sử dụng document.execCommand () (Phương thức này hiện không được dùng nữa).
  2. Sử dụng Giao diện Navigator.clipboard (Cách mới).

Sử dụng khay nhớ tạm với JavaScript

Chúng tôi sẽ chủ yếu tập trung vào việc truy cập khay nhớ tạm bằng giao diện Navigator.clipboard mới vì phương thức khác (document.execCommand) hiện không được dùng nữa (mặc dù nó vẫn hoạt động trên một số trình duyệt).
Giao diện Navigator.clipboard được hỗ trợ bởi các phiên bản mới nhất của tất cả các trình duyệt chính. Nó cho phép chúng tôi truy cập khay nhớ tạm thông qua api khay nhớ tạm, đây là một thuộc tính trên đối tượng điều hướng được cung cấp bởi đối tượng cửa sổ trình duyệt. Đối tượng điều hướng là một đối tượng cung cấp thông tin về tác nhân người dùng (trình duyệt) đang được sử dụng để xem một trang web.Bạn có thể truy cập vào đối tượng điều hướng bằng cách sử dụng window.navigator hoặc chỉ điều hướng trực tiếp trong mã ur. Nó cung cấp một số thuộc tính bao gồm vị trí địa lý (được sử dụng để xác định vị trí của người dùng), bàn phím, ngôn ngữ, maxTouchPoints, onLine (được sử dụng để xác định xem trình duyệt có trực tuyến hay không), quyền, khay nhớ tạm, v.v. Chúng tôi sẽ chỉ tập trung vào thuộc tính khay nhớ tạm của trình điều hướng vì đó là tất cả những gì chúng ta cần để đạt được chức năng sao chép trong mã của mình.

Thuộc tính khay nhớ tạm trên đối tượng điều hướng là một đối tượng cho phép một trang web truy cập vào khay nhớ tạm của hệ thống để đọc và ghi dữ liệu vào và từ nó. Đối tượng khay nhớ tạm có bốn phương thức:

  • read (): điều này được sử dụng để yêu cầu các loại dữ liệu khác nhau từ khay nhớ tạm như hình ảnh, văn bản, v.v.
  • readText (): chỉ được sử dụng để yêu cầu nội dung văn bản từ khay nhớ tạm.
  • write (): Sử dụng phương pháp này, các loại dữ liệu khác nhau có thể được ghi từ trang web của chúng tôi vào khay nhớ tạm thời của hệ thống.
  • writeText (): Phương thức này chỉ cho phép chúng tôi ghi văn bản từ trang web của mình vào khay nhớ tạm thời của hệ thống.
Xem Thêm  Cách sao chép văn bản vào khay nhớ tạm bằng JavaScript - js sao chép vào khay nhớ tạm trên cú nhấp chuột

Tất cả các phương thức bảng tạm là không đồng bộ (dựa trên lời hứa), vì vậy để sử dụng chúng, bạn phải hiểu cách các hứa hẹn hoạt động trong JavaScript. Ngoài ra, trong khi quyền ghi vào khay nhớ tạm được cấp tự động cho trang web, việc đọc dữ liệu từ khay nhớ tạm cần phải có sự cho phép của người dùng. Hãy xem cách sử dụng chúng với một số ví dụ.

Trước khi bắt đầu, chúng ta sẽ tạo một trang web đơn giản với một vài phần tử mà chúng ta sẽ sử dụng để chứng minh cách hoạt động của các phương pháp clipboard khác nhau. Mã cho trang web được hiển thị bên dưới

 & lt; html & gt;
        & lt; đầu & gt;
            & lt; title & gt; trình diễn phương pháp khay nhớ tạm & lt; / title & gt;
        & lt; / head & gt;
        & lt; body & gt;
            & lt; div & gt;
                & lt; input type = "text" value = "Văn bản giả" / & gt;
                & lt; nút onclick = "copyText ()" & gt; Sao chép Văn bản nhập & lt; / nút & gt;
            & lt; / div & gt;
    & lt; / html & gt;
 

Ở trên, chúng tôi có một trang web rất đơn giản bao gồm phần tử div chứa phần tử đầu vào có giá trị mặc định là “Văn bản giả” và một nút có bộ xử lý sự kiện onclick được đặt để gọi một hàm có tên copyText. Với điều đó, chúng tôi có mọi thứ chúng tôi cần để làm việc trên Navigator.clipboard.copyText mẫu đầu tiên của chúng tôi :). Chúng tôi sẽ thêm nhiều yếu tố hơn khi chúng tôi làm việc với các ví dụ khác.

Như đã đề cập trước đó, phương thức copyText cho phép chúng tôi sao chép văn bản từ trang web của mình vào khay nhớ tạm. Trong trang web mẫu của chúng tôi, chúng tôi có một phần tử đầu vào và một nút, chúng tôi sẽ triển khai hàm copyText là trình xử lý sự kiện nhấp chuột của nút. Chúng tôi muốn sao chép văn bản trong đầu vào vào khay nhớ tạm bất cứ khi nào nút được nhấp.

  function copyText () {
        // Chúng ta bắt đầu bằng cách lấy tham chiếu đến phần tử đầu vào
        let myInput = document.querySelector ("đầu vào");
        
        // Sử dụng phương thức writeText của khay nhớ tạm để chuyển văn bản đầu vào vào khay nhớ tạm
        Navigator.clipboard.writeText (myInput.value) .then (res = & gt; {
            console.log ("Đã sao chép thành công dữ liệu đầu vào vào khay nhớ tạm");
        })
    }
 

Trong đoạn mã trên, chúng tôi đã triển khai hàm copyText. Trong hàm, chúng tôi đã bắt đầu bằng cách nhận tham chiếu đến phần tử đầu vào. Chúng tôi cần tài liệu tham khảo để có thể nhận được giá trị của nó. Sau khi nhận được tham chiếu, chúng tôi đã tiến hành gọi phương thức Navigator.clipboard.writeText chuyển nó giá trị của phần tử đầu vào dưới dạng tham số. Phương thức writeText là một phương thức không đồng bộ, nó trả về một lời hứa khi được gọi. Chúng tôi truyền một hàm gọi lại cho phương thức then được gọi khi giải quyết lời hứa. Nếu mọi thứ suôn sẻ và văn bản được sao chép vào khay nhớ tạm, chúng ta sẽ thấy dòng chữ “Đã sao chép thành công dữ liệu nhập vào khay nhớ tạm” trong bảng điều khiển broswer.

Phương thức readText cho phép chúng tôi đọc bất kỳ văn bản nào đã được sao chép vào khay nhớ tạm vào trang web của chúng tôi và sử dụng nó theo cách chúng tôi muốn. Để chứng minh điều này, chúng tôi sẽ thêm một nút vào trang của mình, sau đó thêm trình nghe nhấp chuột vào nút để bất cứ khi nào nút đó được nhấp vào, chúng tôi sẽ nhận được văn bản từ khay nhớ tạm và hiển thị nó trong trang của chúng tôi.

  & lt; div & gt;
        & lt; p id = "displayText" & gt; & lt; / p & gt;
        & lt; button onclick = "readClipboardText ()" & gt; Đọc Văn bản Clipboard & lt; / button & gt;
    & lt; / div & gt;
 
  hàm readClipBoardText () {
        Navigator.clipboard.readText (). then (text = & gt; {
            document.getElementById ("displayText"). innerHTML = text;
        })
    }
 

Trong đoạn mã ở trên, chúng tôi đã thêm phần tử div vào trang html của mình, phần tử div chứa phần tử đoạn có id là displayText và một nút gọi hàm readClipboardText khi được nhấp vào. Trong phần JavaScript, chúng tôi đã triển khai hàm readClipboardText. Trong hàm mà chúng ta gọi là hàm readText trên đối tượng clipboard, là một hàm không đồng bộ, nó trả về một lời hứa với văn bản clipboard cho chúng ta mà chúng ta xử lý bằng cách truyền một hàm mũi tên cho hàm then. Hàm mũi tên của chúng tôi chấp nhận văn bản dưới dạng tham số mà chúng tôi hiển thị trong phần tử displayText trên trang.

Xem Thêm  Toán tử SQL VÀ, HOẶC, KHÔNG PHẢI - sql ở đâu và hoặc

Phương thức ghi của đối tượng khay nhớ tạm cho phép chúng tôi ghi nhiều kiểu dữ liệu khác nhau vào khay nhớ tạm không chỉ là văn bản. Trong ví dụ này, chúng tôi sẽ sao chép nội dung của phần tử canvas vào khay nhớ tạm.

  & lt; canvas id = "myCanvas" & gt; & lt; / canvas & gt;
    & lt; nút onClick = "copyCanvas ('myCanvas')" & gt; Sao chép Canvas & lt; / button & gt;
 
  function copyCanvas (canvasId) {
        canvas.toBlob (blob = & gt; {
            let clipboardItem = new ClipboardItem ({[blob.type]: blob})
            Navigator.clipboard.write ([clipboardItem]). then (
                () = & gt; {
                    console.log ("Dữ liệu được ghi thành công vào khay nhớ tạm")
                },
                err = & gt; {
                    console.log ("Đã xảy ra lỗi")
                }
            )
        })
    }
 

Trong đoạn mã ở trên, chúng tôi đã bắt đầu bằng cách thêm một phần tử canvas và một nút vào html của chúng tôi, khi nút được nhấp vào, nó sẽ gọi hàm copyCanvas chuyển nó thành id của phần tử canvas. Hàm copyCanvas chấp nhận id của canvas, sử dụng nó để nhận tham chiếu đến phần tử canvas. Sau khi nhận được tham chiếu của nó, chúng tôi chuyển đổi canvas thành một đốm màu trước khi chúng tôi có thể sao chép nó vào khay nhớ tạm. Chúng tôi chuyển đổi canvas thành một đốm màu bằng cách gọi phương thức toBlob của nó, phương thức này trả về một lời hứa sẽ giải quyết với đối tượng đốm màu. Sử dụng blob, chúng tôi tạo một mục clipboard bằng cách sử dụng hàm tạo ClipboardItem, bây giờ dữ liệu của chúng tôi đã được thiết lập để ghi vào clipboard. Để ghi dữ liệu của chúng tôi vào clipboard, chúng tôi sử dụng hàm Navigator.clipboard.write chuyển nó vào một mảng có chứa clipboardItem của chúng tôi. Lưu ý rằng hiện tại chúng tôi chỉ có thể ghi một mục vào khay nhớ tạm tại một thời điểm. Hàm write trả về một lời hứa sẽ giải quyết nếu quá trình ghi thành công hoặc từ chối nếu không thành công. Chúng ta truyền hai hàm cho hàm then, hàm đầu tiên được gọi nếu dữ liệu được ghi thành công, trong khi hàm thứ hai được gọi nếu xảy ra lỗi (đối tượng lỗi được chuyển cho hàm dưới dạng tham số).

Phương pháp đọc cho phép chúng tôi đọc các loại dữ liệu khác nhau từ khay nhớ tạm, không chỉ dữ liệu văn bản. Trong ví dụ này, chúng tôi sẽ thêm một nút vào trang html của mình, nút này khi được nhấp vào sẽ đọc dữ liệu từ khay nhớ tạm bằng phương pháp đọc và hiển thị dữ liệu đã đọc trong bảng điều khiển.

  & lt; button onclick = "readData ()" & gt; Đọc dữ liệu & lt; / button & gt;
 
  function readData () {
        Navigator.clipboard.read (). then (
            clipboardItems = & gt; {
                for (const item của clipboardItems) {
                    for (const type of item.types) {
                        let blob = await item.getType (type);
                        console.log (URL.createObjectURL (blob));
                    }
                }
             })
         )
    }
 

Trong đoạn mã ở trên, chúng tôi đã thêm một nút vào trang html. Phương thức onclick của nút gọi hàm readData mà chúng tôi đã xác định trong javascript của mình. Phương thức readData khi được gọi sẽ bắt đầu bằng cách gọi phương thức đọc trên đối tượng clipboard. Phương thức read trả về một lời hứa mà chúng ta xử lý bằng cách truyền một hàm cho phương thức then. Lời hứa giải quyết bằng một mảng clipboardItems, chúng tôi lặp lại từng clipboardItem bằng cách sử dụng vòng lặp for và sau đó vẫn lặp qua danh sách các loại cho mỗi mục gọi hàm getType để xác định loại mục. Sau khi xác định kiểu đốm màu, chúng ta sử dụng thông tin đó để lấy đốm màu thực sự bằng phương thức getType () với kiểu được truy xuất làm đối số. Cuối cùng, chúng tôi hiển thị url đốm màu trong bảng điều khiển.

Xem Thêm  SQL SELECT UNIQUE: Tìm kiếm các giá trị riêng biệt - sql cho các giá trị duy nhất

Kết luận

Kết luận với bài viết này tại OpenGenus, đối tượng clipboard là một công cụ rất hữu ích giúp các nhà phát triển dễ dàng cung cấp chức năng cho phép người dùng chuyển dữ liệu từ trang web sang khay nhớ tạm và ngược lại. Một điều cần lưu ý là mặc dù thuộc tính clipboard được hầu hết các trình duyệt phổ biến hỗ trợ, nhưng cách triển khai của chúng có thể khác một chút. Vì vậy, khi sử dụng khay nhớ tạm, nó có thể hữu ích để cung cấp dự phòng hoặc xử lý lỗi trong trường hợp mọi thứ bị hỏng bất ngờ.


Xem thêm những thông tin liên quan đến chủ đề javascript sao chép phần tử vào khay nhớ tạm

Copy to clipboard with Javascript

  • Tác giả: Skill Kitchen
  • Ngày đăng: 2018-04-03
  • Đánh giá: 4 ⭐ ( 1271 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, we will learn how to copy a text from an input field to the clipboard with javascript.

    Jump directly to the Javascript part: 4:12

    Code source on Github : https://github.com/skillkitchen/js-copy-to-clipboard

    More on http://skillkitchen.co/

Lưu trữ nhiều nội dung đã copy hơn nhờ Khay nhớ tạm của Gboard

  • Tác giả: hieumobile.com
  • Đánh giá: 5 ⭐ ( 6497 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Vanilla JS: Copy to clipboard

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7023 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Người dùng khi click vào button Copy sẽ lưu giá trị vào bộ nhớ clipboard thay cho việc phải nhấn Ctrl + C. Copy to Clipboard Using Vanilla JavaScript

Sao chép đầu ra của một biến JavaScript vào khay nhớ tạm

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 9170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] function copyToClipboard(text) { var dummy = document.createElement(“textarea”); // to avoid breaking orgain page when copying more…

Mã Javascript cho “Sao chép vào khay nhớ tạm” sẽ không hoạt động trong Internet Explorer 11

  • Tác giả: vi.pays-tarusate.org
  • Đánh giá: 5 ⭐ ( 8712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một đoạn mã Javascript hiện thực hiện cuộc gọi đến một trang web cụ thể, trả về dữ liệu, sau đó sao chép nó vào khay nhớ tạm. Nó hoạt động trong Chrome, Safari và Firefox, nhưng đối với một số …

Làm cách nào để sao chép vào khay nhớ tạm trong JavaScript?

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 3 ⭐ ( 1303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sao chép văn bản vào khay nhớ tạm bằng JavaScript Tạo một phần tử

Hướng dẫn sửa lỗi Snipping Tool không sao chép vào khay nhớ tạm

  • Tác giả: f4vnn.com
  • Đánh giá: 5 ⭐ ( 2548 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sửa lỗi Snipping Tool không sao chép vào khay nhớ tạm: Công cụ Windows Snipping, hiện được thay thế bằng công cụ Snip và Sketch là một công cụ tiện dụng…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php