Apakah ada cara untuk membuat DIV tidak dapat dipilih?

Ini pertanyaan CSS yang menarik untuk Anda!

Saya memiliki textarea dengan latar belakang transparan yang menutupi beberapa TEXT yang ingin saya gunakan sebagai semacam tanda air. Teksnya besar dan memakan mayoritas textarea. Kelihatannya bagus, masalahnya adalah ketika pengguna mengklik teks, kadang-kadang memilih teks watermark. Saya ingin teks tanda air tidak pernah dapat dipilih. Saya mengharapkan jika ada sesuatu yang lebih rendah dalam indeks-z itu tidak akan dapat dipilih tetapi browser tampaknya tidak peduli tentang lapisan indeks-z ketika memilih item. Apakah ada trik atau cara untuk membuatnya sehingga DIV ini tidak pernah dapat dipilih?

Saya menulis ekstensi jQuery sederhana untuk menonaktifkan seleksi beberapa waktu lalu: Menonaktifkan Pilihan di jQuery . Anda dapat memohonnya melalui$('.button').disableSelection();

Sebagai alternatif, menggunakan CSS (lintas-browser):

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

Kode CSS berikut berfungsi hampir di peramban modern:

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

Untuk IE, Anda harus menggunakan JS atau menyisipkan atribut dalam tag html.

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

Baru saja memperbarui jawaban asli aleemb, banyak-dipilih dengan beberapa tambahan ke css.

Kami telah menggunakan kombo berikut:

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

Kami mendapat saran untuk menambahkan entri webkit-touch dari:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Apr: Hanya memperbarui jawaban saya sendiri dengan variasi yang mungkin berguna. Jika Anda perlu membuat DIV dipilih / tidak dapat dipilih dengan cepat dan bersedia menggunakan Modernizr , berikut ini berfungsi dengan baik dalam javascript:

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

Seperti yang sudah disarankan Johannes, gambar latar mungkin merupakan cara terbaik untuk mencapai ini hanya dalam CSS.

Solusi JavaScript juga harus memengaruhi "dragstart" agar efektif di semua browser populer.

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);

Kaya

Anda dapat menggunakan pointer-events: none;CSS Anda

div {
  pointer-events: none;
}

Anda dapat mencoba ini:

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

Bukankah gambar latar belakang yang sederhana untuk textarea sudah cukup?

Browser WebKit (yaitu Google Chrome dan Safari) memiliki solusi CSS yang mirip dengan Mozilla -moz-user-select: tidak ada

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

Juga di iOS jika Anda ingin menyingkirkan lapisan abu-abu semi-transparan yang muncul di layar, tambahkan css:

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

Menggunakan

onselectstart = "return false"

itu mencegah menyalin konten Anda.

Pastikan bahwa Anda menetapkan posisi secara eksplisit sebagai absolut atau relatif untuk z-indeks agar berfungsi untuk seleksi. Saya memiliki masalah serupa dan ini menyelesaikannya untuk saya.

Tidak yakin dengan use case Anda, tetapi Anda bisa membuatnya bisa diseret.