JavaScript로 요소의 텍스트 선택 가능 여부를 설정하는 방법

JavaScript에서는 userSelect 속성을 사용하여 요소 내 텍스트의 선택 가능 여부를 손쉽게 제어할 수 있습니다. 이 속성 값을 조절하면 특정 영역의 텍스트를 드래그하여 선택하지 못하도록 차단하거나, 반대로 다시 선택이 가능하도록 활성화할 수 있습니다.

브라우저마다 지원 방식이 다르므로 벤더 접두사를 함께 사용하는 것이 좋습니다.

Firefox: MozUserSelect 속성을 사용하며, 텍스트 선택을 비활성화하려면 값을 none으로 설정합니다.
Chrome / Safari: WebkitUserSelect 속성을 사용합니다.

예제

아래 코드를 실행하면 버튼 클릭 시 해당 div 영역의 텍스트가 더 이상 선택되지 않도록 설정되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <button onclick = "myFunction()">Click me</button>

      <div id = "box">
         위의 버튼을 클릭해 보세요. 버튼을 누른 후에는 이 텍스트를 선택할 수 없습니다.
         userSelect 속성의 사용 예시입니다.
      </div>

      <script>
         function myFunction() {
            var a = document.getElementById("box");
            a.style.userSelect = "none";

            // Chrome 및 Safari에서 동작
            a.style.WebkitUserSelect = "none";

            // Firefox에서 동작
            a.style.MozUserSelect = "none";
         }
      </script>
   </body>

</html>

위 예제처럼 세 가지 속성(userSelect, WebkitUserSelect, MozUserSelect)을 모두 설정하면 대부분의 주요 브라우저에서 일관되게 텍스트 선택이 차단됩니다. 선택 기능을 다시 복원하고 싶다면 각 속성 값을 auto 또는 text로 변경하면 됩니다.