반응형
<style>
/* 버튼의 배경을 투명하게 만듭니다. */
.transparent-button {
background-color: transparent;
border: none; /* 버튼 테두리도 없애기 */
}
</style>
<!-- 복사 버튼을 클릭하여 숫자를 클립보드에 복사합니다. -->
<button id="copyButton" class="transparent-button">
<p id="numberToCopy">1234567890</p>
</button>
<script>
document.getElementById("copyButton").addEventListener("click", function() {
var textToCopy = document.getElementById("numberToCopy").textContent;
// 임시 요소를 생성하고 텍스트를 복사합니다.
var tempInput = document.createElement("input");
tempInput.setAttribute("value", textToCopy);
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
// 복사 성공 메시지를 표시합니다.
alert("숫자가 클립보드에 복사되었습니다.");
});
</script>
은행 앱에서 계좌번호 복사하는 기능과 동일한 기능이다.
모바일 웹에서 계좌번호에 이 기능을 적용해 놓으면 좋을 것 같다.
반응형
'html&php' 카테고리의 다른 글
div 박스 여러개 있을 때 줄바꿈하기 (0) | 2024.05.03 |
---|---|
단어 간 거리 띄우기 (0) | 2024.03.07 |
래디오 버튼을 이용한 선택에 따른 내용 출력하기 - 기본값 (0) | 2023.10.05 |
래디오 버튼을 이용한 선택에 따른 내용 출력하기 (0) | 2023.10.05 |
css와 li 그리고 스크립트를 이용한 세로 메뉴 (0) | 2023.04.26 |