[ jQuery ] 더블 클릭으로 소스코드 전체 선택하기

이 방법은 <PRE></PRE> 태그를 이용하여 소스코드를 공개할때 더블 클릭으로 해당 <PRE></PRE> 태그의 내용 전체를 선택하는 방법입니다.

 

 

 

먼저 jQuery가 사용 가능해야 합니다.

 

아래의 코드를 최하단의 </body> 태그 위에 삽입합니다.

 

 

<script type="text/javascript">
	$('i[rel="pre"]').replaceWith(function() {
		return $("<pre><code>" + $(this).html() + "</code></pre>")
	});
	for (var pres = document.querySelectorAll("pre,kbd,blockquote,i"), i = 0; i < pres.length; i++) {
		pres[i].addEventListener("dblclick", function() {
			var e = getSelection(),
			t = document.createRange();
			t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
		}, !1);
	}
</script>

 

 

 

 

이 작업만으로 끝입니다.

 

위의 소스코드 하일라이트 박스를 더블 클릭하시면 테스트가 가능 합니다.

 

이제 여러분의 소스코드를 더 블클릭하면 전체 소스코드가 선택 되고 방문자는 단지 더블 클릭 후 Ctrl + C 키로 복사해 가면 됩니다.

 

 

추신

가끔 마우스를 막아 놓고 소스코드를 공개하신 분들이 있는데 이경우는 작동 테스트를 하지 않았습니다.

(솔직히 마우스를 막고 소스코들를 공개하는 것은 무슨 의미 인지 모르겠어요.)

이 방법은 티스토리 뿐만아니라 HTML 편집이 가능한 모든 웹에 적용 가능합니다.