[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 comments on “[js] 텍스트 영역 선택 하기”:

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

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

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

Leave a Reply to 환상경 Cancel reply

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