CÁCH LÀM - Sao chép văn bản vào khay nhớ tạm
Tìm hiểu cách sao chép văn bản vào khay 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 khay nhớ tạm
Bước 1) Thêm HTML:
Thí 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:
Thí 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);
}
Hiển thị văn bản được sao chép trong chú giải công cụ
Thêm CSS:
Thí 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;
}