반응형
자바스크립트에서 버튼을 마우스를 클릭할 때 복사하는 방법입니다.
복사 버튼을 누르면 쿠폰 번호가 복사되고 버튼 문구도 '복사'에서 '완료'로 변경됩니다.
<html>
<div class="glassmorphism">
<h1>[회원가입] 1만원 할인 쿠폰</h1>
<p class="txt">
사용기한:~2021.11.11
</p>
<div class="couponWrap">
<form action="">
<input type="text" class="couponNumber" value="abcd-1234-qwer-6789" readonly />
<button type="button" class="copyButton">
복사
</button>
</form>
</div>
<form action="">
<input type="text">
</form>
</div>
html 마크업입니다.
<CSS>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Reset */
body {
background-image: url("./img/a.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
.glassmorphism {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 20px;
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: 0 10px 25px rgba(51, 51, 51,0.5);
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
h1 {
color: white;
font-size: 20px;
}
.icon {
display: block;
margin: 20px auto;
border-radius: 500px;
width: 120px;
border: 5px solid rgba(173, 216, 230,0.8);
}
.txt {
color: white;
margin: 20px 0;
}
.couponWrap {
margin-bottom: 30px;
}
input {
background-color: transparent;
max-width: 200px;
text-transform: uppercase;
margin: 0 auto;
border-radius: 20px;
padding: 0 20px;
border: 1px solid #ffffff;
color: white;
text-align: center;
height: 30px;
outline: 0;
}
input::selection {
background-color: transparent;
}
button {
background-color: transparent;
border: 1px solid #ffffff;
color: #ffffff;
border-radius: 20px;
padding: 5px 10px;
}
button:hover {
background-color: #ffffff;
color: #ff4d4d;
transition: all ease 0.3s;
}
CSS입니다.
<JS>
let button = document.querySelector(".copyButton");
let coupon = document.querySelector(".couponNumber");
button.addEventListener("click", copyNumber);
function copyNumber(e) {
e.preventDefault();
coupon.select();
coupon.setSelectionRange(0, 100);
document.execCommand("copy");
button.innerHTML = '완료';
}
자바스크립트 코드입니다.
버튼 클릭시 copyNumber 함수를 실행합니다.
select()와 setSelectionRange()를 사용해 범위를 선택해주고
execCommand API를 사용해 선택된 범위를 클립보드에 복사합니다.
복사가 되었으면 innerHTML로 버튼의 내용을 바꿔줍니다.
execCommand API를 사용하실 때는 호환성을 확인하신 후에 사용하시는 게 좋습니다.
반응형
'코딩 > CSS+JS 구현' 카테고리의 다른 글
| 자바스크립트로 이름을 랜덤으로 뽑는 방법 (0) | 2024.06.28 |
|---|---|
| CSS로 글래스모피즘 만드는 방법 (0) | 2021.10.11 |
| 자바스크립트로 1~10 사이의 랜덤 숫자 뽑는 법 (0) | 2021.10.10 |
| 자바스크립트로 숫자 카운팅 앱 만들기 (0) | 2021.10.09 |
댓글