Divanda bazı metinlerin seçilmesi nasıl devre dışı bırakılır?

Question

ı gibi işaretli bir metin var diyelim:

Ve başlatmak veya seçimin bitiş işareti olmadığını böyle seçerek devre dışı bırakmak istiyoruz. Bu nedenle, bu seçimleri mümkün olmalıdır: Öte yandan

, bu seçimleri devre dışı bırakılmalıdır:

Şimdiye kadar, bazı basit css kullanan tek denedik

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

Bunu yapmanın bir yolu var mı ? Herhangi bir cevap takdir edilecektir!

---

Yapmak istediklerimi elde ettim, bu yüzden burada paylaşıyorum.

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

Sadece CSS ile yapmanın mümkün olacağını düşünmüyorum, büyük olasılıkla kullanıcının seçmeye başladığı öğeleri saptamak için JavaScript'e ihtiyacınız olacak. Yaptıklarımı

---

Ben seçilen aralıktaki olmadığını tespit etmek için (henüz tüm tarayıcılar ile çalışmayabilir bir çalışma taslağı, ve kaldırılmış olabilir) Seçim API containsNode yöntemi kullanıldı Ya bütünü içermektedir işaretli eleman ya da hiç değil. Seçim sadece işaretli bir öğenin parçasını içeriyorsa, removeAllRanges yöntemini kullanarak seçimi temizler.Fare olayları ve dokunmatik olayları (ı dahil tümü), klavye şapka seçimi, veya programlı seçimi ile, istediğiniz seçimin tüm yöntemleri yakalamak ister gerekir

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>.

Not.

---

Bu

genişletilmiş ve beğeninize ayarlı, ama bu senin gözlük istediğiniz davranışı kopyalayan benim en iyi atış yapılabilir. Seçimin sınırlarından biri işaretli bir bölgenin kenarında başlarsa veya biterse, yukarıdaki kod parçacığı her zaman düzgün çalışmaz, ancak pasajın, işe yarayacak temel tasarımını göstermesi gerekir, yalnızca kenar için biraz ince ayar yapmak gerekir vakalar.

Answer 2

kullanıcı seçme CSS özelliği henüz resmi değildir ve sadece en son tarayıcılar tarafından desteklenmektedir.

Neyse sen user-select: none; kullanmak ve bir span etiketi

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

içine seçilemez tüm metin içine Ama bu

.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>

gibi bir şey deneyebilirsiniz

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