DIV'yi seçilemez yapmanın bir yolu var mı?

İşte size ilginç bir CSS sorusu!

Ben şeffaf bir arka plan ile bir tür filigran olarak kullanmak istiyorum bazı METİN overlaying bir textarea var. Metin büyük ve metin alanının çoğunu kaplıyor. Güzel görünüyor, sorun, kullanıcı metin alanına tıkladığında bazen filigran metnini seçiyor. Filigran metninin asla seçilemez olmasını istiyorum. Bir şey z-endeksi daha düşük olsaydı seçilebilir olmazdı ama tarayıcılar öğeleri seçerken z-endeksi katmanları umurumda görünmüyordu bekliyordum. Bu DIV asla seçilemez hale getirmek için bir hile veya yol var mı?

Bir süre geri devre dışı seçime basit jQuery uzantısı yazdı: Devre Dışı Bırakma Seçimi içinde jQuery . Aracılığıyla çağırabilirsiniz$('.button').disableSelection();

Alternatif olarak, CSS (çapraz tarayıcı) kullanarak:

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

Aşağıdaki CSS kodu neredeyse modern tarayıcıda çalışır:

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

IE için html etiketine JS kullanmalı veya öznitelik eklemelisiniz.

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

Sadece aleemb'ın orijinal, çok beğenilen cevabını css'e birkaç ekleme ile güncelliyor.

Aşağıdaki komboyu kullanıyoruz:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Webkit-touch girişini eklemek için öneri aldık:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Nis: Sadece kendi cevabımı işe yarayabilecek bir varyasyonla güncelliyorum. DIV'yi seçilebilir / seçilemez hale getirmeniz gerekiyorsa ve Modernizr'ı kullanmaya istekli iseniz , aşağıdakiler düzgün bir şekilde javascript'te çalışır:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Johannes'in daha önce de belirttiği gibi, bir arka plan görüntüsü muhtemelen CSS'de bunu başarmanın en iyi yoludur.

Bir JavaScript çözümünün, tüm popüler tarayıcılarda etkili olması için "dragstart" ı da etkilemesi gerekir.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Zengin

pointer-events: none;CSS'nizde kullanabilirsiniz

div {
  pointer-events: none;
}

bunu deneyebilirsiniz:

<div onselectstart="return false">your text</div>

Metin alanı için basit bir arka plan görüntüsü yeterli olmaz mı?

WebKit tarayıcılarında (yani Google Chrome ve Safari) Mozilla'nın -moz-user-select uygulamasına benzer bir CSS çözümü vardır: yok

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Ayrıca IOS'ta, üzerinde görünen gri yarı saydam bindirmelerden kurtulmak istiyorsanız, css ekleyin:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

kullanım

onselectstart = "yanlış döndür"

içeriğinizin kopyalanmasını önler.

Z-endeksinin seçim için çalışması için konumu açıkça mutlak veya göreli olarak ayarladığınızdan emin olun. Benzer bir sorunum vardı ve bu benim için çözdü.

Kullanım durumunuzdan emin değilsiniz, ancak sürüklenebilir hale getirebilirsiniz.