Pertanyaan Bagaimana cara menonaktifkan sorotan pemilihan teks?


Untuk jangkar yang bertindak seperti tombol (misalnya, Pertanyaan, Tag, Pengguna, dll. di bagian atas halaman Stack Overflow) atau tab, apakah ada cara standar CSS untuk menonaktifkan efek sorotan jika pengguna tidak sengaja memilih teks?

Saya menyadari ini bisa dilakukan dengan JavaScript, dan sedikit googling menghasilkan Mozilla-only -moz-user-select pilihan.

Apakah ada cara yang memenuhi standar untuk mencapai hal ini dengan CSS, dan jika tidak, apa pendekatan "praktik terbaik"?


4351
2018-05-05 20:29


asal


Jawaban:


UPDATE Januari, 2017:

Menurut Bisakah saya gunakan, yang user-select saat ini didukung di semua browser kecuali Internet Explorer 9 dan versi sebelumnya (tapi sayangnya masih membutuhkan awalan vendor).


Semua variasi CSS yang benar adalah:

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


Perhatikan bahwa itu a fitur non-standar (yaitu bukan bagian dari spesifikasi apa pun). Tidak dijamin bekerja di mana-mana, dan mungkin ada perbedaan dalam penerapan di antara peramban dan di masa mendatang peramban dapat menjatuhkan dukungan untuk itu.


Informasi lebih lanjut dapat ditemukan di Dokumentasi Mozilla Developer Network.


6361
2017-12-05 11:45



Di sebagian besar browser, ini dapat dicapai dengan menggunakan variasi kepemilikan pada CSS user-select milik, awalnya diusulkan dan kemudian ditinggalkan di CSS3 dan sekarang diusulkan Tingkat UI CSS 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;
}

Untuk IE <10 dan Opera <15, Anda harus menggunakan unselectable atribut dari elemen yang Anda inginkan menjadi tidak dapat dipilih. Anda dapat mengatur ini menggunakan atribut dalam HTML:

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

Sayangnya properti ini tidak diwariskan, artinya Anda harus meletakkan atribut di tag awal dari setiap elemen di dalam <div>. Jika ini adalah masalah, Anda bisa menggunakan JavaScript untuk melakukan ini secara rekursif untuk turunan elemen:

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

Perbarui 30 April 2014: Traversal pohon ini perlu dijalankan kembali setiap kali elemen baru ditambahkan ke pohon, tetapi tampaknya dari komentar oleh @Han bahwa adalah mungkin untuk menghindari ini dengan menambahkan a mousedown pengendali event yang mengatur unselectable pada target acara. Lihat http://jsbin.com/yagekiji/1 untuk detailnya.


Ini masih belum mencakup semua kemungkinan. Meskipun tidak mungkin untuk memulai pemilihan dalam elemen yang tidak dapat dipilih, di beberapa browser (IE dan Firefox, misalnya) masih tidak mungkin untuk mencegah pemilihan yang dimulai sebelum dan berakhir setelah elemen yang tidak dapat dipilih tanpa membuat seluruh dokumen tidak dapat dipilih.


727
2017-11-13 16:05



Solusi JavaScript untuk IE adalah

onselectstart="return false;"

165
2018-05-05 20:37



Sampai CSS 3 pilih pengguna properti menjadi tersedia, Tokekbrowser berbasis mendukung -moz-user-select properti yang sudah Anda temukan. WebKit dan peramban berbasis Blink mendukung -webkit-user-select milik.

Ini tentu saja tidak didukung di browser yang tidak menggunakan mesin rendering Gecko.

Tidak ada "standar" yang memenuhi cara cepat dan mudah untuk melakukannya; menggunakan JavaScript adalah opsi.

Pertanyaan sebenarnya adalah, mengapa Anda ingin pengguna tidak dapat menyorot dan mungkin menyalin dan menyisipkan elemen-elemen tertentu? Saya belum menemukan satu waktu pun bahwa saya tidak ingin pengguna menyorot bagian tertentu dari situs web saya. Beberapa teman saya, setelah menghabiskan banyak waktu membaca dan menulis kode akan menggunakan fitur sorotan sebagai cara untuk mengingat di mana halaman itu berada, atau memberikan penanda agar mata mereka tahu di mana harus melihat selanjutnya.

Satu-satunya tempat saya bisa melihat ini berguna adalah jika Anda memiliki tombol untuk formulir yang tidak boleh disalin dan ditempelkan jika pengguna menyalin dan menempelkan situs web.


159
2018-05-24 21:24



Jika Anda ingin menonaktifkan pemilihan teks dalam segala hal kecuali pada <p> elemen, Anda dapat melakukan ini di CSS (hati-hati untuk -moz-none yang memungkinkan penggantian di sub-elemen, yang diizinkan di browser lain dengan 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



Pada pilihan solusi di atas dihentikan, tetapi pengguna masih berpikir Anda dapat memilih teks karena kursor masih berubah. Agar tetap statis, Anda harus mengatur kursor CSS Anda:

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

Ini akan membuat teks Anda benar-benar datar, seperti di aplikasi desktop.


111
2018-05-05 20:46



Anda dapat melakukannya di Firefox dan Safari (Chrome juga?)

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

101
2017-09-21 07:09