Làm cách nào để sao chép văn bản đã chọn trong JavaScript?

Trong bài viết này, tôi sẽ giải thích sâu về cách thức hoạt động của đoạn mã _copyToClipboard_ từ đoạn mã dài 30 giây. Bạn có thể tìm thấy mã nguồn của nó và rất nhiều phương pháp hữu ích khác trong kho lưu trữ của dự án

Chức năng cốt lõi

Một điều xuất hiện khá thường xuyên trong quá trình xây dựng trang web là khả năng sao chép một số văn bản vào khay nhớ tạm mà không cần người dùng chọn nó hoặc nhấn tổ hợp phím thích hợp trên bàn phím của họ. Javascript có thể dễ dàng làm điều này trong năm bước ngắn

Chúng ta đang sống trong thời đại công nghệ, nơi mọi thứ đều bị ảnh hưởng bởi công nghệ. Công nghệ đã cung cấp nhiều giải pháp tiên tiến và đã vượt qua nhiều nỗ lực thủ công. Vì vậy, trong thời đại công nghệ này, việc chọn văn bản và sao chép thủ công bằng “ctrl + c” có vẻ đã lỗi thời và hơi mất thời gian. Vậy làm thế nào để tự động hóa nó?

Chà, nhờ có JavaScript. Nó cung cấp một số thuộc tính bảng tạm tích hợp cho phép chúng tôi sao chép/dán văn bản vào bảng tạm chỉ bằng một lần bấm nút

Trong bài viết này, chúng ta sẽ tìm hiểu cách sao chép văn bản vào khay nhớ tạm bằng HTML và JavaScript

Vì vậy, hãy bắt đầu

Cách sao chép/dán văn bản vào khay nhớ tạm bằng JavaScript

Chương trình ví dụ dưới đây sẽ cung cấp cho bạn hiểu biết chi tiết về cách sao chép văn bản vào khay nhớ tạm bằng JavaScript

Sao chép dán. html

< đầu vào loại="văn bản" value="Welcome to LinuxHint" id="inputText">

<br><br>

<button onclick="copyFunction()">Copy</button>

<br><br>

<p id = "ptext"></p>

In this example, we created an input field and a button, on clicking the button the text will be copied to the clipboard. Next, we created an

element and assign it an id “ptext”.

Sao chép dán. js

function copyFunction () {

var copyData = document.getElementById("inputText");

var showText = document.getElementById("ptext");

copyData.chọn();

navigator. bảng nhớ tạm . writeText( copyData. giá trị);

showText. innerHTML = "Đã sao chép văn bản. " + copyData. giá trị;

}

Đoạn mã trên phục vụ các chức năng được liệt kê bên dưới

• Chúng tôi đã tạo một chức năng có tên là “copyFunction()” chức năng này sẽ được gọi khi ai đó nhấp vào nút “Sao chép”
• Trong copyFunction(), chúng tôi đã sử dụng phương thức getElementById() để đọc các phần tử HTML
• Tiếp theo, chúng tôi sử dụng phương thức select() để chọn trường văn bản
• Sau đó, chúng tôi sử dụng bộ điều hướng. bảng tạm. writeText() để sao chép văn bản vào khay nhớ tạm
• Finally, we utilized the innerHTML property to set the name and age on the

  element.

Khi thực hiện thành công chương trình, ban đầu, chúng ta sẽ nhận được kết quả như bên dưới

Nếu mọi thứ suôn sẻ, sau đó nhấp vào nút “Sao chép” sẽ hiển thị thông báo “Đã sao chép văn bản” cùng với văn bản đã sao chép

Đầu ra xác thực rằng chương trình của chúng tôi đang hoạt động hoàn toàn tốt

Trình diễn thực tế

Trong phần này, chúng tôi sẽ cho bạn thấy minh họa thực tế của chương trình đã cho ở trên

Đoạn mã trên cho biết cách sao chép/dán văn bản vào khay nhớ tạm bằng JavaScript

Phần kết luận

JavaScript cung cấp một số thuộc tính bảng tạm tích hợp cho phép chúng tôi sao chép/dán văn bản vào bảng tạm chỉ bằng một lần bấm nút. Trong JavaScript, bộ điều hướng. clipboard được sử dụng để truy cập vào clipboard trong khi thuộc tính writeText() được sử dụng để sao chép văn bản vào clipboard. Bài viết này trình bày một hướng dẫn toàn diện về cách sao chép/dán văn bản vào khay nhớ tạm bằng JavaScript

Cho phép người dùng sao chép mã mẫu là một điều phổ biến trong phát triển web hiện nay. Để chứng minh việc thực hiện, chúng tôi tạo ra hai yếu tố

<pre id="sampleCode"><code>...code>pre>
<button id="copyButton">Copybutton>

Phần tử sampleCode chứa mã mẫu đã được đánh dấu

Sao chép mã mẫu vào khay nhớ tạm có thể bao gồm ba bước

• Chọn nội dung văn bản của phần tử mã
• Sao chép nó vào khay nhớ tạm bằng hàm document.execCommand('copy')
• Cuối cùng nhưng không kém phần quan trọng, cả hai bước trên đều có ảnh hưởng đến việc chọn văn bản

Vì vậy, chúng tôi phải sao lưu văn bản đã chọn hiện tại trước khi sao chép và khôi phục nó khi kết thúc

Bạn có thể xem mã trong bản demo bên dưới. Vui thích

Thử nghiệm

Thử nghiệm

Xem thêm

• Đính kèm hoặc tách một trình xử lý sự kiện
• Sao chép văn bản vào clipboard
• Lấy văn bản đã chọn
• Dán dưới dạng văn bản gốc
• Lưu và khôi phục lựa chọn văn bản
• Chọn nội dung văn bản của một phần tử

Làm cách nào để sao chép và dán văn bản trong JavaScript?

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

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