CSS를 사용하면 사용자가 다음을 사용하여 요소 내에서 텍스트를 선택하는 것을 방지할 수 있습니다. user-select: none. 이제 그렇게 하는 것이 "논란의 여지가 있는" 것으로 간주되는 이유를 이해할 수 있습니다. 내말은, 영상을 표준 사용자 행동을 비활성화합니까? 일반적으로 말하자면, 우리는 그렇게 해서는 안 된다. 그러나 텍스트 선택을 비활성화하면 일부 합법적인(드문지만) 사용 사례가 있습니까? 그렇게 생각해요.

이 기사에서는 이러한 사용 사례를 살펴보고 어떻게 사용할 수 있는지 살펴보겠습니다. user-select: none 사용자 경험을 개선(방해가 아님)합니다. 그것 역시 가치가 없다. user-select 속성에 다른 값이 있습니다. none 완전히 비활성화하는 대신 텍스트 선택의 동작을 변경하는 데 사용할 수 있는 다른 값과 시행 텍스트 선택에 대해서도 살펴보겠습니다.

가능한 user-select 값

다른 것을 통해 실행하여 일을 시작합시다. user-select 가치와 그들이 하는 일.

적용 user-select: none; 요소에 대한 것은 해당 텍스트 콘텐츠 및 중첩된 텍스트 콘텐츠가 기능적으로 선택하거나 시각적으로 선택할 수 없음을 의미합니다(예: ::selection 작동하지 않습니다). 선택할 수 없는 콘텐츠가 포함된 선택을 했다면 선택 불가능한 콘텐츠가 선택에서 생략되므로 상당히 잘 구현되었습니다. 그리고 지원이 훌륭합니다.

반대로, user-select: text 콘텐츠를 선택할 수 있도록 합니다. 이 값을 사용하여 덮어씁니다. user-select: none.

user-select: contain 흥미로운 것입니다. 그것을 적용한다는 것은 선택이 요소 내에서 시작되면 그것을 포함하는 그 안에서도 끝나야 함을 의미합니다. 이상하게도 선택이 시작되면 적용되지 않습니다. 전에 그러나 이것이 아마도 현재 지원하는 브라우저가 없는 이유일 것입니다. (Internet Explorer 및 이전 버전의 Microsoft Edge는 이전에 다음과 같은 형태로 지원했습니다. user-select: element.)

와 user-select: all, 요소 콘텐츠의 일부를 선택하면 모든 콘텐츠가 자동으로 선택됩니다. 그것은 전부 아니면 전무이며, 매우 타협하지 않지만 사용자가 콘텐츠를 클립보드에 복사할 가능성이 더 높은 상황에서 유용합니다(예: 링크 공유 및 포함, 코드 조각 등). 두 번 클릭하는 대신 사용자가 한 번만 클릭하면 콘텐츠가 자동으로 선택됩니다.

그러나 이것이 항상 생각하는 기능은 아니므로 주의하십시오. 사용자가 선택만 하려는 경우 부품 콘텐츠(예: Google Fonts 스니펫의 글꼴 이름 부분 또는 코드 스니펫의 일부)? 그래도 처리하는 게 낫다”클립 보드에 복사" 많은 시나리오에서 JavaScript를 사용합니다.

더 나은 적용 user-select: all 따옴표가 완전하고 정확하게 복사되도록 하는 것입니다.

행동 user-select: auto (초기값 user-select) 요소와 사용 방법에 따라 다릅니다. 이에 대한 자세한 내용은 우리의 연감.

이제 사용 사례를 살펴보겠습니다. user-select: none...

선택 영역에서 비텍스트 제거

웹 페이지에서 콘텐츠를 복사할 때 기사나 다른 유형의 긴 형식 콘텐츠에서 가져온 것일 수 있습니다. 그렇죠? 선택 항목에 이미지, 이모티콘(때로는 텍스트로 복사할 수 있음, 예: ":thinkingface:") 및 기타 항목이 포함되는 것을 원하지 않을 수 있습니다.

요소(예: 기사 내 클릭 유도문안, 광고 또는 기본 콘텐츠의 일부가 아닌 기타 항목).

선택 항목에 무언가가 포함되지 않도록 하려면 HTML 요소로 래핑되었는지 확인한 다음 적용하십시오. user-select: none 그것에 :

lorem 🤔 ipsum

이와 같은 시나리오에서는 선택을 비활성화하는 것이 아니라 최적화 그것. 선택이 반드시 복사를 의미하지는 않는다는 점도 언급할 가치가 있습니다. 많은 독자(저를 포함하여)는 읽을 때 콘텐츠를 선택하여 자신이 어디에 있는지 기억할 수 있기를 좋아합니다(예: 책갈피). 완전히 비활성화하는 것보다 최적화해야 하는 또 다른 이유입니다.

우발적 선택 방지

신청 user-select: none 버튼처럼 보이는 링크(예: Click Me!).

의 텍스트 내용을 선택할 수 없습니다. or 왜냐하면, 글쎄, 당신은 왜 그럴까요? 그러나 전통적으로 선택 가능한 단락의 일부를 형성하기 때문에 이 동작은 링크에 적용되지 않습니다.

공정하다.

우리는 다음과 같이 주장할 수 있습니다. 링크를 버튼처럼 보이게 하는 것은 안티 패턴입니다., 하지만 무엇이든. 인터넷을 깨는 건 아니잖아요? 그 배는 어쨌든 항해했으므로 버튼처럼 보이도록 설계된 링크를 사용하는 경우 일관성을 위해뿐만 아니라 사용자가 상호 작용을 트리거하는 대신 실수로 콘텐츠를 선택하는 것을 방지하기 위해 버튼의 동작을 모방해야 합니다.

나는 인정하는 것보다 더 많이 침대에서 노트북을 사용하기 때문에 실수로 물건을 선택하는 경향이 있습니다. 또한 제어 및 조정에 영향을 줄 수 있는 여러 의학적 상태가 있어 의도한 클릭을 의도하지 않은 드래그/선택으로 전환하므로 다음으로 해결할 수 있는 접근성 문제가 있습니다. user-select 도.

(의도적으로) 끌기를 필요로 하는 상호 작용도 물론 존재하지만(예: 브라우저 게임에서) 이러한 경우는 흔하지 않습니다. 그래도 그냥 보여줍니다. user-select 실제로 꽤 많은 사용 사례가 있습니다.

페이월 콘텐츠 도난 방지

Paywalled 콘텐츠는 많은 증오를 받지만 콘텐츠를 보호해야 한다고 생각한다면 콘텐츠입니다. 비용을 지불해야 한다고 생각하지 않는다는 이유로 콘텐츠를 훔칠 권리는 없습니다.

이 경로를 따르고 싶다면 사용자가 페이월을 우회하는 것을 더 어렵게 만드는 여러 가지 방법이 있습니다(또는 유사하게, 다른 사람의 출판물과 같은 저작권이 있는 콘텐츠를 복사).

CSS로 콘텐츠를 흐리게 하기:

article { filter: blur(); }

DevTools의 키보드 단축키 비활성화:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

컨텍스트 메뉴 자체를 비활성화하여 컨텍스트 메뉴를 통한 DevTools 액세스 비활성화:

document.addEventListener("contextmenu", e => e.preventDefault())

물론 소스에서 읽을 수 없는 경우 사용자가 콘텐츠를 복사하는 것을 방지하기 위해 user-select: none:

다른 사용 사례가 있습니까?

텍스트 선택을 방지하기 위해 생각할 수 있는 세 가지 사용 사례입니다. 몇몇 다른 사람들이 내 마음을 가로막았지만 그것들은 모두 스트레치처럼 보였습니다. 하지만 당신은 어떻습니까? 무엇이든 텍스트 선택을 비활성화해야 했습니까? 알고 싶습니다!