텍스트박스 글자 클립보드로 복사하는 방법 1가지

텍스트박스 글자 클립보드로 복사하는 방법을 찾아보다가 챗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>