Apakah ada cara untuk membuat DIV tidak dapat dipilih?

140

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?

css

— Whozumommy
sumber

Apakah Anda senang dengan solusi javascript?

— joshcomley

203

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

— aleemb
sumber

@kasperTaeymans terima kasih telah menunjukkannya. memperbarui cuplikan.

— aleemb

@kasperTaeymans Tapi itu dalam draft kerja W3C ... Saya akan memasukkannya untuk berjaga-jaga.

— Camilo Martin

2

Bukan untuk mengambil apa pun dari jawaban asli, yang saya pilih, tetapi sudah lebih dari 3 tahun. Jadi saya menambahkan jawaban di bawah ini ( stackoverflow.com/questions/924916/… ) dengan pengaturan tambahan untuk antarmuka sentuh.

— Anne Gunn

Itulah yang saya inginkan untuk header modal bootstrap yang dapat digerakkan! Terima kasih!

— Pengembang

62

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>

— KimKha
sumber

Apa tujuannya unselectable="on". Bisakah Anda memberikan referensi

— pengguna

4

Saya temukan di sini: msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx Tapi saya benar-benar diuji pada IE, dan berfungsi dengan benar.

— KimKha

1

Saya tidak yakin. Tetapi <code> unselectable = "on" </code> mungkin disertakan pada IE, dan validator W3C tidak menerima atribut itu.

— KimKha

Meskipun bekerja pada browser modern, itu belum ditentukan oleh W3C.

— Ciro Santilli 郝海东冠状病六四事件法轮功

41

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

— Anne Gunn
sumber

menerapkan user-select: noneke divtidak memiliki efek apapun. Saya cukup yakin user-selecthanya untuk teks. Adakah cara lain untuk membuat yang divtidak dapat dipilih?

— oldboy

22

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

— Kim3er
sumber

13

Anda dapat menggunakan pointer-events: none;CSS Anda

div {
  pointer-events: none;
}

— Dam Linh
sumber

6

Anda dapat mencoba ini:

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

— Fortega
sumber

1

Masih dimungkinkan untuk memilih dengan klik dua kali.

— ceving

6

Bukankah gambar latar belakang yang sederhana untuk textarea sudah cukup?

— Joey
sumber

1

Yah, saya lebih suka maksudnya watermark, tapi gambar latar transparan bisa bekerja juga. Juga Anda harus gambar tidak genteng sangat kecil karena beberapa browser mendapatkan karuan lambat dalam hal :)

— Joey

Terutama karena png 1000x1000 transparan (atau gif) hanya 4kb.

— Ryan Florence

Lebih mirip 1 KiB, sebenarnya :-)

— Joey

4

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*/
}

— James
sumber

2

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;

— Artjom Kurapov
sumber

-1

Menggunakan

onselectstart = "return false"

itu mencegah menyalin konten Anda.

— Anuraj
sumber

4

Solusi ini telah diposting oleh orang lain.

— dazedconfused

-1

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.

— Eric Grotke
sumber

-2

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

— Costa
sumber

Ini jawaban yang tidak menyenangkan namun valid.

— Rusty