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 : sao chép dữ liệu vào khay nhớ tạm javascript

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  Dự án học máy đầu tiên của bạn bằng Python từng bước - mã máy học ví dụ python

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  Biến toàn cầu trong Python với các ví dụ [Đã cập nhật] - python gán biến toàn cụ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  Chương trình Java để ghi vào tệp - cách ghi vào một tệp trong java

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ủ đề sao chép dữ liệu vào clipboard javascript

Copy Text to Clipboard using JavaScript

  • Tác giả: Programming with Vishal
  • Ngày đăng: 2021-08-14
  • Đánh giá: 4 ⭐ ( 8587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hello Friends, In this video we are discussing copy text to a clipboard using JavaScript.

    For Best Hosting Plan Check:- https://www.hostinger.in/programmingwithvishal
    Also, use the below Coupon Code for an attractive discount: PROGRAMMINGWITHVISHAL

    Follow me on Instagram:- https://bit.ly/programmingwithvishal_insta

    To help and support me(Donate Me):- http://bit.ly/ProgrammingWithVishalDonate

    Learn PHP Online with Me:- https://bit.ly/LearnPHPOnline

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    ✅Subscribe: https://www.youtube.com/channel/UCWgCuvL3lcgjGyjIok1zWNQ?sub_confirmation=1

    I am a Digital Marketer by passion and a Developer by profession. With experience and expertise spanning around 10 years, in the Digital space.

    Good amount of experience in development of web applications using PHP, .Net, JavaScript Library’s, Frameworks, CMS, API’s, Reporting tools and Payment Gateways. Skilled in digital viral marketing, technology innovation’s, brand building and all phases of the Web development lifecycle with an expert in translating business requirements into technical solutions and fanatical about quality, usability, security, and scalability. Dealing with and resolving problems and issues which arise.

JavaScript: Cách tạo nút copy vào clipboard

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

Clipboard là gì? Hướng dẫn sử dụng Clipboard

  • Tác giả: www.totolink.vn
  • Đánh giá: 5 ⭐ ( 5199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Clipboard là gì? đang là thắc mắc của rất nhiều người. Vì thế, chúng tôi xin đưa ra các thông tin đầy đủ về Clipboard trong bài viết dưới đây để các bạn tham khảo.

Sao chép và dán dữ liệu trong Excel

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 9968 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: MS Excel cung cấp tùy chọn sao chép/dán (Copy/Paste) theo nhiều cách khác nhau. Phương pháp đơn giản nhất của sao chép dán như dưới đây.

Làm cách nào để sao chép vào bảng tạm trong JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5307 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tổng quat Có ba API trình duyệt chính để sao chép vào bảng tạm: API Clipboard…

JavaScript sao chép vào Clipboard

  • Tác giả: code24h.com
  • Đánh giá: 3 ⭐ ( 3243 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sao chép vào clipboard là một chức năng chúng ta sử dụng hàng chục lần mỗi ngày.Trong bài này,mình sẽ hướng dẫn các bạn triển khai khả năng cắt hoặc sao chép dữ liệu vào clipboard của người dùng sử dụng clipboard.js.
    Cách cài đặt
    Bạn có thể lựa chọn một trong số cách cài đặt sau:
    sử dụng CDN

Cách sử dụng công cụ hỗ trợ sao chép Clipboard trong Microsoft Word

  • Tác giả: ketoanducminh.edu.vn
  • Đánh giá: 5 ⭐ ( 7955 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng công cụ hỗ trợ sao chép Clipboard trong Microsof Word một cách cụ thể nhất

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