• HTML
  • JS
  • J볃교

버튼을 누르면 해당 내용 복사하기

2019-06-04 268

설명

  • 카카오톡 링크

버튼을 클릭 시 앞에 있는 내용을 CTRL+C 한 효과를 나타납니다 :D

※주의 : 일반 텍스트는 안되고, INPUT/TEXTAREA 으로 처리해야 합니다(안보이게 처리하실려면 마지막째줄 복사 버튼참고)

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	.copy_btn { display: inline-block; width: auto; height: 24px; line-height: 24px; box-sizing: border-box; padding: 0 15px; background: #f2849e; font-family: "NanumSquare"; font-size: 14px; font-weight: 300; letter-spacing: -0.05em; color: #fff; border-radius: 3px; vertical-align:top }
	.copy_ul li {margin-top:10px}
	.copy_ul li:first-child {margin-top:0}
	.copy_ul li input.none { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
</style>
<ul class="copy_ul">
	<li>
		<input type="text" name="" id="copy1" value="가나다라마바사" />
		<a href="javascript:;" class="copy_btn" data-id="copy1">복사</a>
	</li>
	<li>
		<input type="text" name="" id="copy2" value="123" />
		<a href="javascript:;" class="copy_btn" data-id="copy2">복사</a>
	</li>
	<li>
		<textarea name="" id="copy3">우오오오오오오오오오오오오오</textarea>
		<a href="javascript:;" class="copy_btn" data-id="copy3">복사</a>
	</li>
	<li>
		<input type="text" name="" id="copy4" class="none" value="마지막줄입니다" />
		<a href="javascript:;" class="copy_btn" data-id="copy4">복사</a>
	</li>
</ul>

<script type="text/javascript">
	$(".copy_btn").on("click", function() {
			var urlbox = document.getElementById($(this).attr("data-id"));
			urlbox.select();
			document.execCommand( 'Copy' );
			alert( '복사 되었습니다.' );
	});
</script>