고정 헤더 영역
상세 컨텐츠
본문
반응형
클립보드 복사하기 예제 입니다.
설명은 소스의 주석을 참고하세요.
<!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"+"출처는 허스크"
위와 같이 하시면 됩니다.
반응형
'JavaScript & HTML' 카테고리의 다른 글
| JavaScript 실시간 D-Day 예제 소스 (0) | 2023.02.16 |
|---|---|
| selectbox change 이전값 확인 (0) | 2021.08.25 |
| 비활성화 체크박스 전체 선택시 체크 금지 (0) | 2020.07.23 |
| 크롬 플래시 항상 허용 (크롬 끄고 다시 켜도 허용) (0) | 2018.11.20 |
| 자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) (4) | 2017.11.14 |
댓글 영역