html&php

은행 계좌번호 복사에 사용하는 터치하면 복사하기

Zyss 2024. 1. 22. 14:41
반응형
    <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>

 

은행 앱에서 계좌번호 복사하는 기능과 동일한 기능이다.

모바일 웹에서 계좌번호에 이 기능을 적용해 놓으면 좋을 것 같다.

반응형