HTML 또는 JS에서 강조 표시를 비활성화하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/1224433

문제

웹 앱에서 선택한 텍스트의 강조 표시를 비활성화해야합니다. 나는 이것을 할 충분한 이유가 있고 이것이 일반적으로 나쁜 생각이라는 것을 알고 있습니다. 하지만 어쨌든해야합니다. CSS 또는 JS를 사용해야하는지 여부는 중요하지 않습니다. 내가 주로 가고있는 것은 강조 표시된 요소에 주어진 파란색을 제거하는 것입니다.

도움이 되었습니까?

해결책

CSS 의사 클래스 선택기를 사용할 수 있습니다 ::selection 그리고 ::-moz-selection Firefox의 경우.

예를 들어:

::-moz-selection {
    background-color: transparent;
    color: #000;
}

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }

다른 팁

CSS3 솔루션 :

user-select: none;
-moz-user-select: none;

사용자 선택에 대한 WebKit 접두사도 있지만 일부 형태의 필드는 초점을 맞추기가 불가능하게 만들므로 (임시 버그 일 수 있음) WebKit에 대한 다음 의사 클래스와 함께 갈 수 있습니다.

element::selection

나는 당신이 의미하는 바가 텍스트를 선택하는 것입니다 (예 : 마우스를 강조하기 위해 마우스를 끌어 내기). 그렇다면 IE와 Mozilla의 선택 조치를 취소합니다.

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}

초점 의사 수업을 찾고 있다고 생각합니다. 이 시도:

input:focus {
  background-color: #f0f;
}

선택할 때 입력에 예쁜 보라색/분홍색 색상을 제공합니다.

어떤 속성을 설정 해야하는지 잘 모르겠지만 시행 착오를 사용하여 자신을 찾을 수 있다고 생각합니다.

또한 하이라이트 또는 부재는 브라우저에 따라 다릅니다!

마우스를 끌 때 텍스트를 강조한다는 의미입니까?

이를 수행하는 가장 좋은 방법은 :: selection이라는 CSS3 속성을 사용하는 것입니다. 그러나 CSS3 인 것은 아직 잘지지되지 않았습니다. 계속해서 찾아보십시오. 그렇지 않으면 JavaScript로 수행 할 수있는 방법이있을 수 있습니다.

궁극적 인 목표는 텍스트의 복사 및 붙여 넣기를 더 어렵게 만드는 것이라면, JavaScript와 CSS는 브라우저의 View-Source 기능을 비활성화 할 수 없기 때문에 올바른 기술이 아닙니다.

다른 아이디어 (그 중 어느 것도 이상적이지 않음) :

  • Java 애플릿 (텍스트 디스플레이 및 검색을 모두 제어)
  • 다른 브라우저 플러그인 (플래시, 실버 라이트 등)에서 동일합니다.
  • 서버 측 생성 이미지 (성능 저하)
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top