2017-12-15 16 views
5

Powiedzmy mam tekst znaku, takie jak:Jak wyłączyć zaznaczanie części tekstu w div?

enter image description here

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:

enter image description here
enter image description here
enter image description here

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

enter image description here
enter image description here

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

+3

Nie widzę żadnego prostego sposobu robienia tego. Będziesz musiał przeanalizować tekst, użyć zdarzeń myszy, dodać klasy itp. – kemotoe

+0

Możesz zgłosić kilka raportów o błędach i mieć nadzieję, że dostawcy przeglądarki to naprawią. https://drafts.csswg.org/css-ui-4/#valdef-user-select-all "Jeśli selekcja zawiera część elementu, wówczas wybór musi zawierać cały element, w tym wszystkich jego potomków" - nie mówi nic o tym, że wybrane musi zaczynać się od kliknięcia (które mówi nam MDN) –

+0

Co do części "Czy jest jakikolwiek sposób to zrobić", zobacz https://stackoverflow.com/questions/985272/selecting- text-in-an-element-akin-to-highlighting-with-your-mouse (yes) –

Odpowiedz

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.

+0

+1 za pomocny pomysł! Jednak zawiedzie, gdy wybór zaczyna się lub kończy na granicy znaku. – didgogns

+0

@didgogns Wspomniałem o tym przypadku w mojej odpowiedzi. Podałem ci podstawowy kod, aby wykonać zadanie, o które prosiłeś i wyjaśniłeś, dlaczego to działa. Aby dostosować go do określonych preferencji, musisz go edytować, aby zachowywał się dokładnie tak, jak chcesz. – andrewgu

0

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

+1

On nie chce Nie był w stanie wybrać, po prostu nie był w stanie wybrać częściowo. – Keith

Powiązane problemy