[js] 텍스트 영역 선택 하기

예전에 잠시 서비스 되었다가 현재는 서비스 되고 있지 않은 웹 페이지에 붙이는 펜 서비스가 있었습니다. 그때 어떤식으로 그런걸 구현할 수 있었는지 궁금한 마음에 찾아보다가 스크랩 해놨던 걸 몇일 전에 다시 보게 되었습니다.

이제와서 다시 한번 살펴보니 당시에 서비스 했던 그 펜 서비스가 이걸 사용해 개발되었는지 잘 모르겠고.. 게다가, 이 녀석을 사용할곳이 과연 있을까 싶기는 하지만.. 언젠가는 쓰지 않을까 하는 마음에 정리해봅니다;;

웹페이지에서 텍스트를 선택하는 행위를 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자위에서 더블클릭을 하곤 합니다. 이런 일련의 이벤트를 javascript 를 통해서도 할 수 있는데,
그것을 할 수 있게 해주는 것이 Selection (MSDN은 TextRange) 입니다.

우선 예제를 보면

http://jsfiddle.net/rootbox/D4kaG/ 에서 직접 실행해보고 코드를 수정해 볼 수 있습니다.

selectRange(DOM객체) 함수가 하는 역할은 인자로 받은 DOM객체 영역을 선택해주는 것 입니다.
(주석처리된 5라인과, 10라인은 선택된 영역의 내용을 보여주는 부분입니다.)

selection과 TextRange 에 대한 좀 더 자세한 내용은
https://developer.mozilla.org/en/DOM/window.getSelection
http://msdn.microsoft.com/en-us/library/ie/ms536401(v=vs.85).aspx
에서 보실 수 있습니다.

위 레퍼런스를 보면 상기 코드처럼 사용자를 대신에 특정 영역을 선택할 수 있고,
사용자가 임의로 선택된 영역의 내용을 가져올 수 도 있습니다.
물론, 더 많은 일들도 할 수 있죠~

활용은 여러분의 몫입니다.;.. 분명 어딘가 유용하게 쓰이긴 할 것 같단 말이죠!

덧, 오래전 스크랩이라 출처가 기억나지 않습니다. 원작자분에 대한 최소한의 예의로 코드를 좀 손봤…(응?) 습니다.

2 Replies to “[js] 텍스트 영역 선택 하기

  1. 레몬펜이었나? 오픈마루에서 서비스했던 그거 말씀하시는거군요
    처음 그거 봤을때 참신하다라고 생각했는데 막상 사용해보니 그닥 사용도가 떨어져서
    쓰다 말았었는데 그걸 보시고 어떻게 구현했는지 생각해보셨다니

    역시 천재님은 바라보는 관점이 다르군요 +_+

    1. 네 맞아요. 레몬펜 서비스를 말하는 거였어요. 참신한 아이디어였지만 역사의 뒤안길로 쓸쓸히 사라져버렸죠..
      누군가에겐 가슴아픈 기억일까봐 브랜드명은 말하지 않았었지만 아시는 분은 다 아시겠죠. ㅎ
      저게 구현 방법이 맞을지는 몰라요; 그냥 제 생각인것.. 뿐 ㄷ..

Leave a Reply to 환상경 Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.