Bagaimana cara menonaktifkan pemilihan teks menggunakan jQuery?

Apakah jQuery atau jQuery-UI memiliki fungsi untuk menonaktifkan pemilihan teks untuk elemen dokumen yang diberikan?

Di jQuery 1.8, ini bisa dilakukan sebagai berikut:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

Jika Anda menggunakan jQuery UI, ada metode untuk itu, tetapi hanya bisa menangani pemilihan mouse (yaitu CTRL+ Amasih berfungsi):

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

Kode ini benar-benar sederhana, jika Anda tidak ingin menggunakan jQuery UI:

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

Saya menemukan jawaban ini ( Prevent Highlight of Text Table ) paling membantu, dan mungkin dapat dikombinasikan dengan cara lain menyediakan kompatibilitas IE.

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

Berikut adalah solusi yang lebih komprehensif untuk pemilihan putuskan sambungan, dan pembatalan beberapa tombol pintas (seperti Ctrl+ adan Ctrl+ c. Tes: Cmd + adan Cmd+ c)

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

dan hubungi contoh:

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

Ini mungkin juga tidak cukup untuk versi FireFox lama (saya tidak tahu yang mana). Jika semua ini tidak berhasil, tambahkan yang berikut:

.on('mousedown', false)

Berikut ini akan menonaktifkan pemilihan 'item' semua kelas di semua browser umum (IE, Chrome, Mozilla, Opera dan Safari):

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);

        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });

Ini dapat dengan mudah dilakukan menggunakan JavaScript. Ini berlaku untuk semua Peramban

<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") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

Panggil ke fungsi ini

<script type="text/javascript">
   disableSelection(document.body)
</script>

Ini sebenarnya sangat sederhana. Untuk menonaktifkan pemilihan teks (dan juga mengeklik + menyeret teks (misalnya tautan di Chrome)), cukup gunakan kode jQuery berikut:

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

Semua ini dilakukan adalah mencegah terjadinya default ketika Anda mengklik dengan mouse Anda ( mousedown()) di tag bodydan html. Anda dapat dengan mudah mengubah elemen hanya dengan mengubah teks di antara dua tanda kutip (misalnya perubahan $('body, html')untuk $('#myUnselectableDiv')membuat myUnselectableDivdiv untuk menjadi, baik, unselectable.

Cuplikan singkat untuk menunjukkan / membuktikan ini kepada Anda:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

Harap dicatat bahwa efek ini tidak sempurna, dan melakukan yang terbaik sambil membuat seluruh jendela tidak dapat dipilih. Anda mungkin juga ingin menambahkan

pembatalan beberapa tombol pintas (seperti Ctrl+adan Ctrl+c. Tes: Cmd+a dan Cmd+c)

juga, dengan menggunakan bagian jawaban Vladimir di atas. (buka posnya di sini )

1 solusi garis untuk CHROME:

body.style.webkitUserSelect = "none";

dan FF:

body.style.MozUserSelect = "none";

IE memerlukan pengaturan atribut "tidak dapat dipilih" (perincian di bawah).

Saya menguji ini di Chrome dan berhasil. Properti ini diwarisi sehingga pengaturannya pada elemen tubuh akan menonaktifkan pemilihan di seluruh dokumen Anda.

Detail di sini: http://help.dottoro.com/ljrlukea.php

Jika Anda menggunakan Penutupan, panggil saja fungsi ini:

goog.style.setUnselectable(myElement, true);

Ini menangani semua browser secara transparan.

Peramban non-IE ditangani seperti ini:

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

Didefinisikan di sini: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

Bagian IE ditangani seperti ini:

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

Saya pikir kode ini berfungsi di semua browser dan membutuhkan biaya overhead paling sedikit. Ini benar-benar campuran dari semua jawaban di atas. Beri tahu saya jika Anda menemukan bug!

Tambahkan CSS:

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

Tambahkan jQuery:

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

Opsional: Untuk menonaktifkan pemilihan untuk semua elemen anak-anak juga, Anda dapat mengubah blok IE menjadi:

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

Pemakaian:

$('.someclasshere').disableSelection();

Saya sudah mencoba semua pendekatan, dan ini yang paling sederhana bagi saya karena saya menggunakan IWebBrowser2 dan tidak punya 10 browser untuk bersaing dengan:

document.onselectstart = new Function('return false;');

Berfungsi sempurna untuk saya!

Salah satu solusi untuk ini, untuk kasus yang sesuai, adalah dengan menggunakan <button>untuk teks yang Anda tidak ingin dipilih. Jika Anda mengikat clickacara pada beberapa blok teks, dan tidak ingin teks itu dapat dipilih, mengubahnya menjadi tombol akan meningkatkan semantik dan juga mencegah teks dipilih.

<button>Text Here</button>

Cara terbaik dan paling sederhana yang saya temukan, mencegah ctrl + c, klik kanan. Dalam hal ini saya memblokir semuanya, jadi saya tidak perlu menentukan apa pun.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});