javascript: Wyłącz zaznaczanie tekstu

85

Używam javascript, aby wyłączyć zaznaczanie tekstu na mojej stronie internetowej.

Kod to:

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

Podobny skrypt można znaleźć tutaj

Na moim hoście lokalnym: wszystkie przeglądarki (Firefox, Chrome, IE i Safari) działają świetnie.

W mojej witrynie Live: wszystko w porządku Z WYJĄTKIEM Firefoksa.

Moje pytania to:

  1. Czy ktoś ma sugestię, dlaczego Firefox zachowuje się inaczej w przypadku witryny na żywo i lokalnego hosta? Uwaga: Javascript jest włączony.

  2. Może mój skrypt jest zbyt uproszczony, więc próbowałem wykonać następujące czynności z DOKŁADNIE TYMI SAMYMI wynikami

javascript arpeggio
źródło
4
Pozwól, że zasugeruję, aby w tym przypadku unikać używania Javascript. Po prostu użyj CSS, możesz znaleźć więcej informacji na temat
zaznaczania
Drugi skrypt prawdopodobnie jest za stary. Usuń! Document.all, ponieważ uważam, że zepsuje obsługę FX
mplungjan
9
Nienawidzę witryn, które to robią. Jeśli chcę skopiować jakiś tekst, mogę otworzyć narzędzia programistyczne i mimo wszystko go skopiować. To tylko niepotrzebna niedogodność.
uylmz
4
Dokładnie tak, jak mówi Reek. Nie rób tego, chyba że masz ku temu dobry powód. Wiele osób może chcieć po prostu wybrać coś do wyszukania lub użyć słownika, aby znaleźć słowo. Zakaz tego jest tylko irytacją, która może na dłuższą metę zniechęcić użytkowników do Twojej witryny.
Czechnology
1
Po pierwsze, nienawidzę też stron, które zabraniają wybierania (tekstu i innych) tylko dla „zabawy”, ale myślę, że to dobre pytanie, ponieważ istnieją uzasadnione powody, dla których ktoś chce go wyłączyć ( np. Zaimplementować gesty myszy lub przeciągnij i upuść bloków tekstu w dowolnej grze). Oczywiście używanie JS do osiągnięcia tego celu jest złe, ale rozwiązanie CSS również ma swoje problemy (w niektórych przeglądarkach user-selectsamo nie zadziała, wymaga przedrostka "-vendor-", tak jak -moz-user-selecti -webkit-user-select, aby działało , konieczne jest ustawienie wszystkich możliwych odmian na none).
Cyberknight

Odpowiedzi:

211

Po prostu użyj tej metody CSS:

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Możesz znaleźć tę samą odpowiedź tutaj: Jak wyłączyć podświetlanie zaznaczenia tekstu za pomocą CSS?

Zachrip
źródło
7
Dodaj również link, z którego znalazłeś tę odpowiedź: stackoverflow.com/questions/826782/…
Ron van der Heijden
Dziękuję Ci bardzo. CSS w treści działał we wszystkich przypadkach z wyjątkiem IE. Czy istnieje zgrabne rozwiązanie CSS, które rozwiązuje również ten problem dla IE? Teraz używam kombinacji Js i CSS do obsługi wszystkich przeglądarek !! dziękuję.
arpeggio
1. Dlaczego ta odpowiedź nie została oznaczona jako rozwiązanie? ... Rozwiązuje problem w najdokładniejszy i najprostszy sposób. 2. Należy wspomnieć, że tę definicję CSS można zaimplementować na dowolnym elemencie HTML, a nie tylko na BODY.
TheCuBeMan
1
@TheCuBeMan „user-select” to funkcja niestandardowa, dlatego IMO nie jest najlepszym rozwiązaniem.
ndugger
1
To chyba najlepsze podejście - przeglądarki radzą sobie z tym inaczej, ponieważ jest to skomplikowane i wszystkie mają inne ujęcia. Mianowicie, chcą zapewnić zamierzony UX (bez wyboru), jednocześnie pozwalając użytkownikowi wybrać, czy naprawdę tego chce . Szkic W3C ma więcej notatki i caniuse pokazy fantastyczne wsparcie. Nie ma nic złego w tym, że przeglądarki obsługują to inaczej - użytkownik uzyska takie doświadczenie, jakie zapewnia jego preferowana przeglądarka.
Shawn Erquhart
27

Piszę kontrolkę ui suwaka, aby zapewnić funkcję przeciągania, w ten sposób zapobiegam wybieraniu zawartości podczas przeciągania przez użytkownika:

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

zwiąż startDragswój dom:

<button onmousedown="startDrag">...</button>

Jeśli chcesz statycznie wyłączyć zaznaczanie tekstu we wszystkich elementach, wykonaj kod po załadowaniu elementów:

window.addEventListener('selectstart', function(e){ e.preventDefault(); });
Yi Feng Xie
źródło
2
Jest to najlepsze rozwiązanie, ponieważ rozwiązanie CSS nie działa w przypadku elementów div z contenteditableatrybutem (na przykład, jeśli chcesz wyłączyć zaznaczanie tekstu, gdy rozmiar kontrolki jest zmieniany za pomocą myszy użytkownika).
mbomb007
11

W przypadku JavaScript użyj tej funkcji:

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

aby włączyć wybór użyj tego:

function reEnable() {return true}

i użyj tej funkcji w dowolnym miejscu:

document.onclick = reEnable
Hassan Azimi
źródło
Z wyjątkiem new Function (return false)nie jest prawidłowym kodem javascript. Użyj tylko document.onselectstart = disableselect.
amik
@amik, a co powiesz na to: document.oncontextmenu = new Function("return false;");lub to używając CSS:<body onselectstart="return false">
Hassan Azimi
Tak new Function("return false;"), działałoby, ale jest niepotrzebnie skomplikowane w porównaniu do zwykłego używania disableselecttego, co już masz. onselectstart="return false"działałoby też, ale nie ma nic wspólnego z CSS. Zauważyłem też, że reszta twojej odpowiedzi też jest błędna - reEnablefunkcja w ogóle nie zadziała.
amik
@amik haha ​​cóż, w JavaScript nic nie jest konieczne, ale nadal to robimy. Oczywiście kod można przeformułować, ale spójrz na pytanie, odpowiedź, odpowiada na pytanie, nie próbując odrabiać pracy domowej.
Hassan Azimi
Cóż, ale SO to miejsce dla edukacji, więc rozważam udzielenie odpowiedzi, która jest zarówno technicznie błędna, jak i nie wyjaśnia wcale, nie jest dobrym pomysłem.
amik
5

Jeśli masz taką stronę html:

    <body
    onbeforecopy = "return false"
    ondragstart = "return false" 
    onselectstart = "return false" 
    oncontextmenu = "return false" 
    onselect = "document.selection.empty ()" 
    oncopy = "document.selection.empty ()">

Istnieje prosty sposób na wyłączenie wszystkich zdarzeń:

document.write(document.body.innerHTML)

Masz zawartość HTML i straciłeś inne rzeczy.

bootsoon
źródło
4

Można też użyć, działa dobrze we wszystkich przeglądarkach, wymaga javascript:

onselectstart = (e) => {e.preventDefault()}

Przykład: 

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }
Select me!
Rozwiń fragment

Jeszcze jedna alternatywa dla js, testując obsługę CSS i wyłączając userSelectlub MozUserSelectdla przeglądarki Firefox.

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"
Select me!
Rozwiń fragment

Czysty CSS, ta sama logika. Ostrzeżenie, będziesz musiał rozszerzyć te reguły na każdą przeglądarkę, może to być rozwlekłe.

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}
<div>Select me!</div>
Rozwiń fragment

NVRM
źródło
0

Prosty Skopiuj ten tekst i wstaw poprzedni </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
Hasan Sheikh
źródło