Jak wyłączyć zaznaczanie części tekstu w div?

Question

Powiedzmy mam tekst znaku, takie jak:

I chciałbym, aby wyłączyć wybierając taki sposób, że początek lub koniec zaznaczenia nie jest w znaku. Dlatego też wszystkie te pozycje powinny być możliwe:

Z drugiej strony, te pozycje powinny być wyłączone:

Do tej pory próbowałem tylko za pomocą kilku prostych css,

mark { 
 
    -khtml-user-select: all; 
 
    -webkit-user-select: all; 
 
    -o-user-select: all; 
 
    user-select: all; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Czy istnieje jakiś sposób, aby to zrobić? Każda odpowiedź będzie doceniona!

---

Osiągnąłem to, co chciałem, więc udostępniam je tutaj.

function checkSelection() { 
 
    var sel = window.getSelection(); 
 
    var marks = document.getElementsByTagName('mark'); 
 
    for(var i = 1; i < sel.rangeCount; i++) { 
 
    sel.removeRange(sel.getRangeAt(i)); 
 
    } 
 
    var range = sel.getRangeAt(0); 
 
    var startnode = range.startContainer; 
 
    var endnode = range.endContainer; 
 
    for (var i = 0; i < marks.length; i++) { 
 
    \t if (marks[i].contains(startnode)) { 
 
     range.setStartBefore(startnode); 
 
    } 
 
    \t if (marks[i].contains(endnode)) { 
 
     range.setEndAfter(endnode); 
 
    } 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Answer 1

Nie sądzę, że byłoby to możliwe za pomocą samego CSS, najprawdopodobniej będziesz potrzebował JavaScript, aby wykryć elementy, na których użytkownik zaczął wybierać.

---

Co zrobiłem było użyłem metody containsNode z API Selection (projekt roboczej, nie może pracować ze wszystkimi przeglądarkami jeszcze i może być nieaktualne) w celu wykrycia, czy wybranego zakresu albo zawiera całość zaznaczony element lub wcale. Jeśli zaznaczenie zawiera tylko część zaznaczonego elementu, wyczyści zaznaczenie za pomocą metody removeAllRanges.

function checkSelection() { 
 
    var sel = window.getSelection() 
 
    var marks = document.getElementsByTagName('mark') 
 
    for (var i = 0; i < marks.length; i++) { 
 
    if (sel.containsNode(marks[i], false) !== sel.containsNode(marks[i], true)) 
 
     sel.removeAllRanges() // clear selection 
 
    } 
 
} 
 

 
document.addEventListener('mouseup', checkSelection) 
 
document.addEventListener('touchend', checkSelection)

mark { 
 
    background: yellow; 
 
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

Należy pamiętać, że trzeba by uchwycić wszystkie metody selekcji, które chcesz, czy przez zdarzenia myszy i zdarzeń dotykowych (wszystko, co wliczone w cenę), dobór karetki klawiatury lub programowego wyboru.

---

Można to rozszerzyć i dostosować do własnych upodobań, ale jest to mój najlepszy sposób na odtworzenie zachowania, które chcesz ze swojej specyfikacji. Powyższy opis nie działa poprawnie przez cały czas, jeśli jeden z granic selekcji zaczyna się lub kończy na krawędzi zaznaczonego regionu, ale fragment powinien pokazywać podstawową koncepcję tego, co powinno działać, tylko z odrobiną dostrojenia do krawędzi przypadki.

Answer 2

użytkownika wybierz właściwość CSS nie jest jeszcze oficjalny i jest obsługiwane tylko przez najnowsze przeglądarki.

Anyways można użyć user-select: none; i ująć cały tekst, który nie może być wybrany wewnątrz span tagu

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Ale można spróbować czegoś jak ten

.unselectable { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<p>This text can be selected, But <span class="unselectable">this</span> can only be <span class="unselectable">partially se</span>lected</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select