2017-12-15 191 views
5

ı gibi işaretli bir metin var diyelim:Divanda bazı metinlerin seçilmesi nasıl devre dışı bırakılır?

enter image description here

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

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

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

enter image description here
enter image description here

Ş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

+3

Bunu yapmanın basit bir yolunu göremiyorum. Metni ayrıştırmanız, fare olaylarını kullanmanız, sınıflar eklemeniz gerekir. – kemotoe

+0

Bazı hata raporlarını kaydedebilir ve tarayıcı satıcılarının bunu düzeltmesini isteyebilirsiniz. https://drafts.csswg.org/css-ui-4/#valdef-user-select-all "Eğer bir seçim öğenin bir parçasını içeriyorsa, seçim tüm unsurlarını içeren tüm öğeyi içermelidir" - bir tıklama ile başlamak zorunda seçimle ilgili hiçbir şey söylemiyor (hangi MDN bize söyler) –

+0

"Bunu yapmanın bir yolu var" bölümüne gelince, bkz. https://stackoverflow.com/questions/985272/selecting- metin-in-bir-öğe-fare-ile-fare-vurgulamak-in-your-mouse (evet) –

cevap

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.

+0

+1! Ancak seçim, işaretin sınırında başladığında veya bittiğinde başarısız olur. – didgogns

+0

@didgogns Bu durumu cevabımda söyledim. İstediğiniz görevi gerçekleştirmek için temel kodu verdim ve neden işe yaradığını açıkladım. Belirli tercihlere göre ayarlamak için, tam olarak nasıl istediğinizi gerçekleştirecek şekilde düzenlemek zorundasınız. – andrewgu

0

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

+1

O istemiyor Seçilmiyor, sadece kısmen seçilemiyor. Bazı yararlı fikirler sağlamak için – Keith