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"
Copy
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ố
...
Copy
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ử