텍스트박스 글자 클립보드로 복사하는 방법을 찾아보다가 챗GPT와 함께 만들어 봤습니다. 복사하기 버튼에 마우스 오버시 tooltips 까지 나옵니다. 아래 포스팅은 기록형으로 추후 참고하기 위해 작성되었습니다. 필요하신 분들은 사용하셔도 됩니다.
- 질문에 답변을 해 드릴 수 없습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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;
}
.button {
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 2px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button3 {
background-color: white;
color: black;
width: 100px;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
</style>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "복사완료!<br> 붙여넣기하세요"
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "클릭! 복사됩니다";
}
</script>
</head>
<body>
<div style="width:100%; max-width:1200px; margin:30px auto;">
<div>
<textarea id="myInput" style="border:5px solid #ff6600;font-size:13px;height:60px;width: 300px;max-width:100%;padding:5px;">
단축 URL 링크 주소 줄이기
회원가입없이 무료로 긴 링크 주소를 짧게 줄여주는 서비스
https://url.kr
</textarea>
</div>
<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()" class="button button3">
<span class="tooltiptext" id="myTooltip">클릭! 복사됩니다</span>
복사하기
</button>
</div>
</div>
</body>
</html>
