728x90
반응형
안녕하세요. ^-^
오늘은 늘 필요하지만 막상 사용하려고 하면
한참을 찾아 헤매는 클립보드를 이용한
a태그 내용 복사입니다.
많이들 보셨을 거예요.
이메일이나 주소 옆에 이모티콘을 누르면
주소 내용이 복사되는 것 말이에요.
자바스크립트로 만들 수도 있지만
내용이 참으로 복잡하더라고요.
그래서 간단하게 라이브러리를 이용해서
만들어 볼까 합니다.
오늘은 아주 간단하게 [ html ] [ css ] [ jquery ]
나누지 않고 [ html ]에 한방에 써보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>*{
margin:0;
padding:0;
box-sizing:border-box;
}
section{
height:500px;
position:relative;
padding:100px 0 50px;
overflow:hidden;
z-index: 1;
text-align:center;
}
section a{
display:inline-block;
text-align:center;
color:#ffffff;
background:#435faf;
height:50px;
line-height:50px;
padding: 0 20px;
border-radius:5px;
cursor:pointer;
}</style>
</head>
<body>
<section>
<a class="btn_copy" data-clipboard-text="메일 주소 복사 !!"><i class="fal fa-envelope"></i>메일 주소 복사 !!</a>
</section>
<script src="jquery-3.6.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$(".btn_copy").off().on("click", function(){
var clipboard = new ClipboardJS('.btn_copy');
alert("복사되었습니다.");
});
});
</script>
</body>
</html>
|
cs |
내용은 참으로 간단한데 길어 보이네요.
여기서의 키 포인트는
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
라이브러리입니다.
cdn으로 붙여 넣으면 바로 사용할 수 있어요.
.btn_copy를 누르면
data-clipboard-text=""에 있는 내용을 복사하게 됩니다.
그리고 alert창으로 메시지를 띄워주게 되죠.
728x90
누르면
이렇게 됩니다.
그리고 붙여 넣기 Ctrl+V를 하면 내용일 붙여 넣어지죠.
아주 간단하죠~~
쓸 일이 참 많을 거예요.
오늘도 건강하고 행복한 하루 보내세요!
728x90
반응형
'코딩 어린이의 노트' 카테고리의 다른 글
| css만으로 checkbox, radio버튼 커스텀 하기 (2) | 2023.02.24 |
|---|---|
| jquery 반응형 resize만들기 (2) | 2023.02.18 |
| 그라데이션 박스에 투명 테두리 넣어주기 (0) | 2023.02.12 |
| 원형 그라데이션 배경색을 만들어 보자 (0) | 2023.02.11 |
| 그라데이션 배경색 만들기 (0) | 2023.02.10 |