Soru Metin seçimi vurgulamayı nasıl devre dışı bırakılır?


Düğmeler gibi hareket eden çapalar için (örneğin, Sorular, Etiketler, KullanıcılarYığın Taşması sayfasının üst kısmındaki vb. veya sekmeler, kullanıcı yanlışlıkla metni seçerse vurgulama efektini devre dışı bırakmak için bir CSS standart yolu var mı?

Bunun JavaScript ile yapılabileceğini anlıyorum ve küçük bir googling sadece Mozilla'yı verdi. -moz-user-select seçeneği.

Bunu CSS ile gerçekleştirmek için standartlara uygun bir yol var mı ve değilse, “en iyi uygulama” yaklaşımı nedir?


4360
2018-05-05 20:29


Menşei


cadı unsuru içindeki elemanlar engelli vurgulanır, stil veya sınıf özniteliğinde css ile vurgulama etkinleştirilmiş olabilir mi? Başka bir deyişle, -webkit-user-select ect için başka değerler vardır. hiçbiri dışında?
'kullanıcı seç' - Değerler: yok | metin | geçiş yapmak | eleman | elemanlar | hepsi | devralın - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
uihacker.blogspot.com/2011/12/... - Enve
İlgili: stackoverflow.com/questions/16600479/... = Alt öğelerden sadece bazılarının seçilmesine nasıl izin verilir - JK.
Bazı tarayıcılarda "Tümünü Seç" seçeneğinin (CTRL + A ve CMD + A) hala bazı şeyleri seçtiği bir hata vardır. Bu şeffaf bir seçim rengi ile savaşılabilir: ::selection { background: transparent; } ::-moz-selection { background: transparent; } - DaAwesomeP


Cevaplar:


Ocak 2017, 2017:

Göre Kullanabilirmiyim, user-select Internet Explorer 9 ve önceki sürümler dışındaki tüm tarayıcılarda şu anda desteklenmektedir (ancak ne yazık ki yine bir satıcı önekine ihtiyaç duyar).


Tüm doğru CSS varyasyonları şunlardır:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Unutmayın ki bir standart olmayan özellik (yani herhangi bir spesifikasyonun bir parçası değildir). Her yerde çalışmak garanti edilmez ve tarayıcılar arasında uygulamada farklılıklar olabilir ve ileride tarayıcılar bu desteği destekleyebilir.


Daha fazla bilgi bulunabilir Mozilla Geliştirici Ağı belgeleri.


6369
2017-12-05 11:45



güzel kod molokoloco: D, kimi zaman kullandıklarımdan uzak kalacağım, bazen farklı tarayıcılar için farklı değerlere ihtiyaç duyabiliyor ve JavaScript'e dayanıyor. Bir sınıf oluşturmak ve elemanınıza eklemek ya da css'i stil sayfanızdaki eleman tipine uygulamak oldukça kurşun geçirmezdir. - Blowsie
'kullanıcı seç' - Değerler: yok | metin | geçiş yapmak | eleman | elemanlar | hepsi | devralın - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
Aslında -o-user-select, Opera'da uygulanmadı. Bunun yerine IE'nin seçilmez niteliğini uygular. - Tim Down
Bir sebepten dolayı, bu yalnız IE8'de çalışmıyordu, sonra ekledim <div onselectstart="return false;"> benim ana div'a. - robasta
bu gülünç! Aynı şeyi yapmak için çok farklı yollar. Kullanıcı seçimleri için yeni bir standart yapalım. onu arayacağız standard-user-select. o zaman bu problemlere sahip olmayacağız. geriye dönük uyumluluk için de diğerlerini de dahil etmeliyiz. Yani şimdi kod olur -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, çok daha iyi. - Claudiu


Çoğu tarayıcıda, bu CSS üzerinde tescilli varyasyonlar kullanılarak elde edilebilir user-select mülkiyet, orijinal olarak önerildi ve daha sonra CSS3'te terk edildi ve şimdi teklif CSS UI Seviye 4:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

IE <10 ve Opera <15 için kullanmanız gerekir unselectable Seçilmemiş olmak istediğiniz öğenin özniteliği. Bunu HTML'de bir özellik kullanarak ayarlayabilirsiniz:

<div id="foo" unselectable="on" class="unselectable">...</div>

Ne yazık ki, bu özellik devralınmaz, yani içindeki her elemanın başlangıç ​​etiketine bir özellik koymalısınız. <div>. Bu bir sorunsa, bir öğenin soyundan gelenler için yinelemeli olarak yapmak için JavaScript'i kullanabilirsiniz:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

30 Nisan 2014 Güncellemesi: Ağaca yeni bir eleman eklendiğinde, bu ağaç geçişi yeniden çalıştırılmalı, ancak bu yorumdan kaçınmak mümkündür. ekleyerek mousedown bu olay işleyicisi unselectable Etkinliğin hedefine. Görmek http://jsbin.com/yagekiji/1 detaylar için.


Bu hala tüm olasılıkları kapsamıyor. Seçilmemiş unsurlarda seçimlerin başlatılması mümkün olmasa da, bazı tarayıcılarda (örneğin IE ve Firefox), tüm belgeyi kabul edilemez hale getirmeden, seçilemez öğeden önce başlayan ve sonlanan seçimleri önlemek hala imkansızdır.


727
2017-11-13 16:05



* seçiciyi kendi örneğinizden kaldırmalı, gerçekten verimli ve gerçekten de bunun örneğinizde kullanması gerekmiyor mu? - Blowsie
@Blowsie: Ben öyle düşünmüyorum: CSS 2 spec bunu belirtiyor *.foo ve .foo tam olarak eşdeğerdir (ikinci durumda, evrensel seçici)*) örtülü), bu yüzden tarayıcı tuhaflıklarını engelleme, * performansa zarar verir. Bu benim için uzun süredir devam eden bir alışkanlıktır. *Aslen okunabilirlik için yapmaya başladığım: yazarın tüm unsurları eşleştirmeyi amaçladığı bir bakışta açıkça belirtiyor. - Tim Down
Daha fazla okumadan sonra oooh, * anahtarın (en yakın seçici), yani .unselectable * olarak kullanıldığında sadece verimsizdir. Daha fazla bilgi burada code.google.com/speed/page-speed/docs/... - Blowsie
Class = "unselectable" kelimesini kullanmak yerine, sadece [selânsız = "on" […}] özniteliğini kullanın - Chris Calo
@Francisc: Hayır. Daha önce söylediğim gibi Blowsie'ye söylediğim gibi, kesinlikle bir fark yaratmıyor. - Tim Down


IE için bir JavaScript çözümü

onselectstart="return false;"

165
2018-05-05 20:37



Unutma ondragstart! - Mathias Bynens
Burada bir şey daha var. Bunu vücuda eklerseniz, IE'de metin alanı veya metin alanı içinde metin seçemezsiniz. IE için onu tamir ettim. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; } - TheBrain
Bu, jQuery - $ ("p") kullanılarak bir öznitelik olarak eklenebilir. Attr ("onselectstart", "false döndür") Bu, IE8'de benim için tek güvenilir yöntemdi - Matt
çoklu css çözümlerine sahip olduğumda neden javascript kullanıyorum? .. - Abudayah
@Abudayah, Internet Explorer'ın eski sürümlerinde çalışmadıkları için mi? Bu cevabın bütün noktası gibi. - Pekka 웃


CSS 3'lere kadar kullanıcı seçme özellik kullanılabilir hale gelir gekotabanlı tarayıcılar -moz-user-select zaten bulduğunuz mülk. WebKit ve Göz kırpma dayalı tarayıcılar -webkit-user-select özelliği.

Bu, Gecko rendering motorunu kullanmayan tarayıcılarda desteklenmez.

Bunu yapmak için "standartlar" uyumlu hızlı ve kolay bir yol yoktur; JavaScript kullanarak bir seçenektir.

Asıl soru, kullanıcıların neden belirli öğeleri vurgulayıp kopyalayamalarını ve yapıştırmamasını istiyorsunuz? Kullanıcıların web sitemin belirli bir bölümünü öne çıkarmasına izin vermemek istediğim tek bir zamana rastlamamıştım. Arkadaşlarımın birçoğunun, okuma ve kod yazma konusunda birçok saat geçirdikten sonra, vurgulama özelliğini, sayfanın neresinde olduklarını hatırlamanın bir yolu olarak ya da gözlerinin bir sonraki noktaya nerede bakacağını bilmeleri için bir işaretleyici olarak kullanmaları gerekir.

Bunun yararlı olduğunu görebildiğim tek yer, bir kullanıcının web sitesini kopyalayıp yapıştırması durumunda kopyalanmaması ve yapıştırılmaması gereken formlar için düğmeler içeriyor olmanızdır.


159
2018-05-24 21:24



Düğmelerdeki şey tam olarak benim motivasyonum olurdu. - Kriem
Bunun bir başka nedeni de, bir kılavuz veya tabloda birden fazla satır seçmek için Shift tuşuna basmaktır. Metni vurgulamak istemezsiniz, satırları seçmek istersiniz. - Gordon Tucker
Başka birinin içeriğinin yasal olarak yeniden yayınlandığı ancak lisansın bir maddesinin, web yayıncılarının metnin kolayca kopyalanmasını ve yapıştırılmasını engellemesini gerektirdiği yasal sorunlar da vardır. Bu soruyu bulmamı sağlayan şey buydu. Bu şartı kabul etmiyorum, ancak sözleşme yaptığım şirket yasal olarak bu yolu uygulamakla yükümlü. - Craig M
@CraigM CSS stili, bir kişinin HTML kaynağını tutmasını ve kopyalamasını durdurmaz. İçeriğinizi korumak istiyorsanız daha iyi yollar bulmanız gerekir. - Agile Jedi
Sürükle & bırak bir sürü ile son derece interaktif web uygulaması ... yanlışlıkla vurgulama büyük bir kullanılabilirlik sorunudur. - Marc Hughes


Dışardaki her şeyde metin seçimini devre dışı bırakmak isterseniz <p> elemanları, bunu CSS'de yapabilirsiniz (dikkat edin -moz-none diğer tarayıcılarda izin verilen alt öğelerde geçersiz kılmayı sağlar none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



Ayrıca giriş alanlarını seçilebilir yaptığınızdan emin olun: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - joshuadelange
Bir öğe hariç, tarayıcı UI beklentilerini TÜM kodda kapatma konusunda çok dikkatli olun. Örneğin, liste öğeleri <li /> metni nedir? - Jason T Featheringham
Firefox 21'den beri MDN'ye göre sadece bir güncelleme ... -moz-none ve none aynıdır. - Kevin Fegan
Bunun için imleci ekleyebilirsiniz: varsayılan ve imleç: sırasıyla metin:) - T4NK3R
Olağanüstü! Teşekkürler! - Nam Nguyen


Yukarıdaki çözümlerde seçim durdurulur, ancak kullanıcı hala imleç değiştiğinden metni seçebileceğinizi düşünür. Statik tutmak için CSS imlecinizi ayarlamanız gerekir:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Bu, bir masaüstü uygulamasında olduğu gibi, metninizi tamamen düz hale getirecektir.


111
2018-05-05 20:46



"Düz" neyin aksine? - kojow7


Firefox ve Safari'de de yapabilirsiniz (Chrome da mı?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

101
2017-09-21 07:09



Bunu yapmamanızı tavsiye etmem, çünkü sorunu düzeltmiyor; metin seçimini devre dışı bırakma - sadece gizler. Bu, kötü kullanılabilirliğe yol açabilir, çünkü imlecimi sayfa etrafında sürüklersem, bilmeden herhangi bir keyfi metin seçebilirdim. Bu, her çeşit garip kullanılabilirliğe "hata" neden olabilir. - Keithamus
PNG görüntüleri üzerinde şeffaf alanlar ile çalışmaz: Her zaman açık mavi renkte seçer… Herhangi bir geçici çözüm var mı? - AvL


İçin geçici çözüm WebKit:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

CardFlip örneğinde buldum.


73
2017-11-11 19:53



kullanma transparent rgba yerine Android'de Chrome 42'de çalışır. - Clint Pachl


Hibrit CSS + jQuery çözümünü seviyorum.

İçerideki tüm elemanları yapmak <div class="draggable"></div> uncialectable, bu CSS'yi kullanın:

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

Ve jQuery kullanıyorsanız, bunu içeriye ekleyin. $(document).ready() blok:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Ben hala giriş elemanlarının interactable olmasını istediğinizi düşünüyorum, dolayısıyla :not() Sözde seçici. Kullanabilirsin '*' bunun yerine umursamıyorsanız.

Caveat: IE9 bu ekstra jQuery parçasına ihtiyaç duymayabilir, bu yüzden orada bir sürüm kontrolü eklemek isteyebilirsiniz.


66
2018-05-01 11:36



-Ms-user-select kullan: none; (IE10 için) ve jQuery'niz "if" şu şekilde olmalıdır: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera) - mhenry1384
Dikkatli ol adamım! Firefox'ta seçilebilir hale getirmek için kullanmalısınız -moz-user-select: Normal; - Nicolas Thery
@nicholasthery w3.org/TR/2000/WD-css3-userint-20000216#user-select - Tom Auger
@ mhenry1384 jQuery.browser 1.3 sürümünde kullanımdan kaldırılmıştır ve 1.9 sürümünde kaldırılmıştır - api.jquery.com/jQuery.browser - WynandB
@Wynand İyi nokta. Ancak hangi CSS özelliğinin kullanılacağını belirlemek için ne tür "özellik algılama" var? - Tom Auger


.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Yine de en iyi yol değil.


62
2017-12-23 14:05



Ayrıca kullanabilirsiniz title öznitelik olarak. - Toothbrush
Bu çok yaratıcı bir çözümdür. Özellikle başlık özniteliğini kullandıysa, bu muhtemelen ekran okuyucuları için daha iyi olurdu. - pseudosavant
Denedim (JSBin) ve IE'de çalışmıyor. Ne yazık ki yaşlı IE'ler sadece user-select işe yaramaz. - pseudosavant


Ek olarak, Internet Explorer için, eklemeniz gerekir sözde sınıf odağı (.ClassName: odak) ve anahat tarzı: yok.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;/*IE*/
}

58
2018-02-27 09:01



Bu seçim, bir öğe ile bir öğede başladığı sürece IE'de çalışır className sınıf. Bunu gör JSBin. - pseudosavant