it-swarm-id.com

Apakah ada cara untuk membuat teks tidak dapat dipilih pada halaman HTML?

Saya sedang membangun UI HTML dengan beberapa elemen teks, seperti nama tab, yang terlihat buruk saat dipilih. Sayangnya, sangat mudah bagi pengguna untuk mengklik dua kali nama tab, yang memilihnya secara default di banyak browser.

Saya mungkin dapat menyelesaikan ini dengan trik JavaScript (saya juga ingin melihat jawaban itu) - tapi saya sangat berharap ada sesuatu di CSS/HTML secara langsung yang bekerja di semua browser.

136
Tyler

Di sebagian besar browser, ini dapat dicapai menggunakan CSS:

*.unselectable {
   -moz-user-select: -moz-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, Anda harus menggunakan atribut unselectable dari elemen yang Anda inginkan 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 setiap elemen di dalam <div>. Jika ini merupakan 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"));
187
Tim Down
<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

[~ # ~] sunting [~ # ~]

Kode tampaknya berasal dari http://www.dynamicdrive.com

41
dimarzionist

Semua variasi CSS yang benar adalah:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
32
Blowsie

Coba ini:

<div onselectstart="return false">some stuff</div>

Sederhana, tetapi efektif ... berfungsi dalam versi saat ini dari semua browser utama.

13
Stephen M. Redd

Untuk Firefox Anda dapat menerapkan deklarasi CSS "-moz-user-select" ke "none". Lihat dokumentasi mereka, pilih-pengguna.

Ini adalah "pratinjau" masa depan "pengguna-pilih" seperti yang mereka katakan, jadi mungkin Opera atau WebKit - browser berbasis akan mendukung itu. Saya juga ingat menemukan sesuatu untuk Internet Explorer, tetapi saya tidak ingat apa :).

Pokoknya, kecuali itu situasi tertentu di mana pemilihan teks membuat beberapa fungsi dinamis gagal, Anda tidak harus benar-benar mengabaikan apa yang diharapkan pengguna dari halaman web, dan itu bisa memilih teks yang mereka inginkan.

11
Jorge Alves

Saya menemukan beberapa tingkat keberhasilan dengan CSS yang dijelaskan di sini http://www.quirksmode.org/css/selection.html :

::selection {
    background-color: transparent;
}

Itu menangani sebagian besar masalah yang saya alami dengan beberapa elemen ThemeRoller ul dalam aplikasi AIR (mesin WebKit). Masih mendapatkan patch kecil (sekitar 15 x 15) dari ketiadaan yang dipilih, tetapi setengah halaman sudah dipilih sebelumnya.

8
jlleblanc

Benar-benar posisikan divs pada area teks dengan indeks-z lebih tinggi dan berikan divs ini transparan GIF grafik latar belakang.

Catatan setelah berpikir sedikit lagi - Anda perlu membuat 'sampul' ini ditautkan sehingga mengkliknya akan membawa Anda ke tempat tab seharusnya, yang berarti Anda bisa/harus melakukan ini dengan elemen jangkar diatur ke display:box, lebar dan tinggi diatur serta gambar latar belakang transparan.

6
Dave Rutledge

Untuk Safari, -khtml-user-select: none, seperti halnya Mozilla -moz-user-select (atau, dalam JavaScript, target.style.KhtmlUserSelect="none";).

4
Alan Hensel

Untuk contoh mengapa mungkin diinginkan untuk menekan seleksi, lihat SIMILE TImeline , yang menggunakan drag-and-drop untuk menjelajahi timeline, di mana gerakan mouse vertikal yang tidak disengaja menyebabkan label disorot secara tak terduga, yang terlihat aneh.

4
pdc

Inilah Sass mixin (scss) bagi mereka yang tertarik. Kompas /CSS 3 tampaknya tidak memiliki mixin pilihan pengguna.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Meskipun Compass akan melakukannya dengan cara yang lebih kuat, yaitu hanya menambahkan dukungan untuk vendor yang Anda pilih.

3
rgb

"Jika konten Anda benar-benar menarik, maka tidak banyak yang dapat Anda lakukan untuk melindunginya"

Itu benar, tetapi sebagian besar penyalinan, dalam pengalaman saya, tidak ada hubungannya dengan "akhirnya" atau Geeks atau plagiar yang tekun atau sesuatu seperti itu. Biasanya ini adalah penyalinan biasa oleh orang yang tidak mengerti, dan bahkan perlindungan yang sederhana dan mudah dikalahkan (mudah dikalahkan oleh orang-orang seperti kita, yaitu) bekerja cukup baik untuk menghentikan mereka. Mereka tidak tahu apa-apa tentang "sumber tampilan" atau cache atau apa pun ... ya, mereka bahkan tidak tahu apa itu browser web atau bahwa mereka menggunakannya.

3
Big Bill

Jika terlihat buruk, Anda dapat menggunakan CSS untuk mengubah tampilan bagian yang dipilih.

1
Wedge

Gambar juga dapat dipilih.

Ada batasan untuk menggunakan JavaScript untuk membatalkan pilihan teks, karena mungkin terjadi bahkan di tempat-tempat di mana Anda ingin memilih. Untuk memastikan karier yang kaya dan sukses, jauhi semua persyaratan yang memerlukan kemampuan untuk memengaruhi atau mengelola peramban di luar biasanya ... kecuali, tentu saja, mereka membayar Anda dengan sangat baik.

1
Kinjal Dixit

Setiap metode JavaScript atau CSS mudah dielakkan dengan Firebug (seperti kasus Flickr).

Anda dapat menggunakan ::selection pseudo-element di CSS untuk mengubah warna sorotan.

Jika tab adalah tautan dan persegi bertitik dalam status aktif menjadi perhatian, Anda dapat menghapusnya juga (pertimbangkan kegunaan tentu saja).

1
Taylor Edmiston

Ada banyak kesempatan ketika mematikan selektivitas meningkatkan pengalaman pengguna.

Misalnya memungkinkan pengguna untuk menyalin blok teks pada halaman tanpa menyalin teks dari setiap elemen antarmuka yang terkait dengannya (yang akan menjadi diselingi dalam teks yang sedang disalin).

1
kbcom

Berikut ini berfungsi di Firefox cukup menarik jika saya menghapus baris tulis itu tidak berfungsi. Siapa pun memiliki wawasan mengapa baris tulis diperlukan.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
0
hbtdev