Cách thực hiện - Sao chép văn bản vào Clipboard
Tìm hiểu cách sao chép văn bản vào bảng nhớ tạm bằng JavaScript.
Bấm vào nút để sao chép văn bản từ trường văn bản.
Sao chép văn bản vào Clipboard
Bước 1) Thêm HTML:
Ví dụ
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy
text</button>
Bước 2) Thêm JavaScript:
Ví dụ
function myFunction() {
// Get the text field
var copyText = document.getElementById("myInput");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile
devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
// Alert the copied
text
alert("Copied the text: " + copyText.value);
}
Hãy tự mình thử » Hiển thị văn bản đã sao chép trong chú giải công cụ
Thêm CSS:
Ví dụ
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent
transparent;
}
.tooltip:hover
.tooltiptext {
visibility: visible;
opacity: 1;
}
Hãy tự mình thử »