DIV 요소 내에서 텍스트 선택을 방지하는 방법은 무엇입니까?

DIV 요소 내에서 텍스트 선택 방지

특정 시나리오에서는 DIV 요소 내의 특정 텍스트를 사용자가 선택할 수 없는 상태로 유지하는 것이 중요합니다. 예를 들어, 텍스트 영역에 오버레이된 크고 반투명한 텍스트가 워터마크 역할을 하는 상황이 발생할 수 있습니다. 미학적 측면에서는 만족스러울 수 있지만 의도치 않게 이 텍스트를 선택하면 방해가 될 수 있습니다.

Z-색인 비효율성

처음에는 Z-색인을 조작하는 것이라고 가정할 수 있습니다. 부동산이 이 문제를 해결해 줄 것입니다. 워터마크 텍스트에 더 낮은 Z-색인 값을 할당하면 이론적으로 더 높은 Z-색인 텍스트 영역 아래에 렌더링됩니다. 그러나 브라우저는 텍스트 선택 가능성을 결정할 때 Z-인덱스 레이어를 무시합니다.

CSS 솔루션

원하는 동작을 달성하기 위해 CSS는 다음과 같은 간단한 솔루션을 제공합니다.

.watermark {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

이 포괄적인 코드는 여러 브라우저에 적합하며 클래스를 사용하여 DIV 요소 내에서 텍스트 선택을 효과적으로 비활성화합니다. "watermark."

jQuery 확장

또는 jQuery 기반 접근 방식을 선호하는 경우 다음 확장 사용을 고려하세요.

$('.watermark').disableSelection();

이 확장은 지정된 DIV 요소 내에서 선택을 명시적으로 방지합니다.

이러한 방법 중 하나를 구현하면 다음이 보장됩니다. 워터마크 텍스트를 선택할 수 없도록 유지하여 사용자 경험을 향상시키고 원치 않는 텍스트 수정을 방지합니다.

위 내용은 DIV 요소 내에서 텍스트 선택을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!