JavaScript & HTML
JavaScript 클립보드 복사하기
husks
2020. 7. 24. 14:37
반응형
클립보드 복사하기 예제 입니다.
설명은 소스의 주석을 참고하세요.
<!DOCTYPE html>
<html>
<head>
<title>Fruit</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.c_artist_nm').click(function() {//클릭 이벤트
$("#copy_text").val($(this).html());//해당 문구 가져와 텍스트박스에 입력
document.getElementById("copy_text").select(); //텍스트 박스 선택
document.execCommand("copy");//클립보드 복사
alert("COPY");
});
});
</script>
</head>
<body>
<input type="text" id="copy_text" style="position:absolute;top:-9999em;"><!-- 안보이는 위치로 설정 -->
<table border="1">
<tr>
<td>
<p class="c_artist_nm" style="cursor:pointer;">사과</p><!-- 손모양 커서 추가 -->
</td>
</tr>
<tr>
<td>
<p class="c_artist_nm" style="cursor:pointer;">바나나</p>
</td>
</tr>
<tr>
<td>
<p class="c_artist_nm" style="cursor:pointer;">복숭아</p>
</td>
</tr>
</table>
</body>
</html>
제가 업무하다가 텍스트 한줄이 아니라 개행까지 필요한 클립보드 복사기능을 구현한게 있는데 그럴때는 아래와 같이 작업하시면 됩니다.
<input type="text" id="copy_text" style="position:absolute;top:-9999em;">를
<textarea id="copy_text" style="position:absolute;top:-9999em;"></textarea>로 바꿔주시고
복사할 문장의 개행 부분에 "\r\n" 를 추가해주면 됩니다.
$(this).html()+"\r\n"+"출처는 허스크"
위와 같이 하시면 됩니다.
반응형