Làm cách nào để tắt lựa chọn văn bản bằng jQuery?

JQuery hoặc jQuery-UI có chức năng nào để vô hiệu hóa lựa chọn văn bản cho các thành phần tài liệu đã cho không?

Trong jQuery 1.8, điều này có thể được thực hiện như sau:

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

Nếu bạn sử dụng jQuery UI, có một phương pháp cho điều đó, nhưng nó chỉ có thể xử lý lựa chọn chuột (tức là CTRL+ Avẫn hoạt động):

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

Mã này thực sự đơn giản, nếu bạn không muốn sử dụng 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; });

Tôi thấy câu trả lời này ( Ngăn chặn làm nổi bật bảng văn bản ) hữu ích nhất và có lẽ nó có thể được kết hợp với một cách khác để cung cấp khả năng tương thích IE.

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

Đây là một giải pháp toàn diện hơn cho lựa chọn ngắt kết nối và hủy một số phím nóng (như Ctrl+ avà Ctrl+ c. Kiểm tra: Cmd + avà 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);

và gọi ví dụ:

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

jsfiddle.net/JBxnQ/

Điều này cũng có thể không đủ cho các phiên bản cũ của FireFox (tôi không thể biết được). Nếu tất cả điều này không hoạt động, thêm vào như sau:

.on('mousedown', false)

Sau đây sẽ vô hiệu hóa lựa chọn của tất cả các 'mục' trong tất cả các trình duyệt phổ biến (IE, Chrome, Mozilla, Opera và 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");
        });

Điều này có thể dễ dàng được thực hiện bằng JavaScript Điều này có thể áp dụng cho tất cả các Trình duyệt

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

Gọi cho chức năng này

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

Điều này thực sự rất đơn giản. Để tắt lựa chọn văn bản (và cũng nhấp vào + kéo văn bản (ví dụ: liên kết trong Chrome)), chỉ cần sử dụng mã jQuery sau:

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

Tất cả điều này là ngăn chặn mặc định xảy ra khi bạn nhấp bằng chuột (mousedown() ) trong thẻ bodyvà html. Bạn có thể dễ dàng thay đổi phần tử chỉ bằng cách thay đổi các văn bản ở giữa hai dấu ngoặc kép (ví dụ như thay đổi $('body, html')để $('#myUnselectableDiv')làm cho các myUnselectableDivdiv là, tốt, unselectable.

Một đoạn nhanh để hiển thị / chứng minh điều này với bạn:

$('#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>

Xin lưu ý rằng hiệu ứng này không hoàn hảo và hoạt động tốt nhất trong khi không thể chọn toàn bộ cửa sổ. Bạn cũng có thể muốn thêm

việc hủy một số phím nóng (chẳng hạn như Ctrl+avà Ctrl+c. Kiểm tra: Cmd+a và Cmd+c)

đồng thời, bằng cách sử dụng phần đó trong câu trả lời của Vladimir ở trên. (đến bài viết của anh ấy ở đây )

Giải pháp 1 dòng cho CHROME:

body.style.webkitUserSelect = "none";

và FF:

body.style.MozUserSelect = "none";

IE yêu cầu thiết lập thuộc tính "không thể chọn" (chi tiết ở phía dưới).

Tôi đã thử nghiệm điều này trong Chrome và nó hoạt động. Thuộc tính này được kế thừa nên việc đặt nó trên phần tử cơ thể sẽ vô hiệu hóa lựa chọn trong toàn bộ tài liệu của bạn.

Chi tiết tại đây: http://help.dottoro.com/ljrlukea.php

Nếu bạn đang sử dụng Đóng, chỉ cần gọi chức năng này:

goog.style.setUnselectable(myElement, true);

Nó xử lý tất cả các trình duyệt trong suốt.

Các trình duyệt không phải IE được xử lý như thế này:

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

Xác định ở đây: http // clenses-l Library.googlecode.com/svn/!svn/bc/4/trunk/clenses/goog/docs/clenses_goog_style_style.js.source.html

Phần IE được xử lý như thế này:

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

Tôi nghĩ rằng mã này hoạt động trên tất cả các trình duyệt và yêu cầu ít chi phí nhất. Nó thực sự là một sự kết hợp của tất cả các câu trả lời ở trên. Hãy cho tôi biết nếu bạn tìm thấy một lỗi!

Thêm 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;}

Thêm jQuery:

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

Tùy chọn: Để vô hiệu hóa lựa chọn cho tất cả các thành phần con, bạn có thể thay đổi khối IE thành:

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

Sử dụng:

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

Tôi đã thử tất cả các cách tiếp cận và đây là cách đơn giản nhất đối với tôi vì tôi đang sử dụng IWebBrowser2 và không có 10 trình duyệt để tranh luận:

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

Hoạt động hoàn hảo cho tôi!

Một giải pháp cho vấn đề này, đối với các trường hợp thích hợp, là sử dụng một <button>văn bản mà bạn không muốn chọn. Nếu bạn liên kết với clicksự kiện trên một số khối văn bản và không muốn văn bản đó có thể được chọn, việc thay đổi nó thành một nút sẽ cải thiện ngữ nghĩa và cũng ngăn văn bản được chọn.

<button>Text Here</button>

Cách tốt nhất và đơn giản nhất tôi đã tìm thấy nó, ngăn ctrl + c, nhấp chuột phải. Trong trường hợp này, tôi đã chặn mọi thứ, vì vậy tôi không phải chỉ định bất cứ điều gì.

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