Як відключити вибір тексту за допомогою jQuery?

Чи має jQuery або jQuery-UI функціонал для відключення вибору тексту для заданих елементів документа?

У jQuery 1.8 це можна зробити так:

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

Якщо ви використовуєте інтерфейс jQuery, для цього є метод, але він може обробляти лише вибір миші (тобто CTRL+ Aвсе ще працює):

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

Код дуже простий, якщо ви не хочете користуватися інтерфейсом jQuery:

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

Я вважаю цю відповідь ( запобігання виділення тексту таблиці ) найбільш корисною, і, можливо, її можна поєднувати з іншим способом забезпечення сумісності IE.

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

Ось більш комплексне рішення щодо вибору відключення та скасування деяких гарячих клавіш (наприклад, Ctrl+ aі Ctrl+ c. Тест: Cmd + aі 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);

і приклад дзвінка:

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

jsfiddle.net/JBxnQ/

Цього також може бути недостатньо для старих версій FireFox (я не можу сказати, який). Якщо все це не працює, додайте наступне:

.on('mousedown', false)

Далі вимкнеться вибір усіх елементів класу у всіх звичайних браузерах (IE, Chrome, Mozilla, Opera та 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");
        });

Це легко зробити за допомогою JavaScript. Це стосується всіх браузерів

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

Зателефонуйте до цієї функції

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

Це насправді дуже просто. Щоб відключити вибір тексту (а також натиснути + перетягування тексту (наприклад, посилання в Chrome)), просто використовуйте наступний код jQuery:

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

Все це - це запобігати тому, що за замовчуванням не відбувається, коли ви клацаєте мишкою ( mousedown()) в тегах bodyта html. Ви можете дуже легко змінити елемент, просто змінивши текст між двома цитатами (наприклад, змінити так, щоб зробити div, щоб бути, ну $('body, html')не $('#myUnselectableDiv')можна вибрати myUnselectableDiv.

Швидкий фрагмент, щоб показати / довести це:

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

Зверніть увагу, що цей ефект не є ідеальним, і виконує найкраще, роблячи все вікно не вибором. Ви також можете додати

скасування деяких гарячих клавіш (таких як Ctrl+aі Ctrl+c. Тест: Cmd+a і Cmd+c)

а також, використовуючи той розділ відповіді Володимира вище. (діставайся його посади тут )

1 лінійний розчин для ХРОМУ:

body.style.webkitUserSelect = "none";

та FF:

body.style.MozUserSelect = "none";

IE вимагає встановлення атрибута "невибір" (деталі внизу).

Я перевірив це в Chrome, і він працює. Це властивість успадковується, тому встановлення його на елемент тіла призведе до відключення вибору у всьому документі.

Деталі тут: http://help.dottoro.com/ljrlukea.php

Якщо ви використовуєте функцію закриття, просто зателефонуйте до цієї функції:

goog.style.setUnselectable(myElement, true);

Він обробляє всі браузери прозоро.

Браузери, які не входять до IE, обробляються так:

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

Тут визначено: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

Частина IE обробляється так:

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

Я думаю, що цей код працює у всіх браузерах і вимагає найменших витрат. Це справді гібрид усіх вищезазначених відповідей. Повідомте мене, якщо ви знайдете помилку!

Додати 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;}

Додати jQuery:

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

Необов’язково: щоб також відключити вибір для всіх дочірніх елементів, ви можете змінити IE-блок на:

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

Використання:

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

Я спробував усі підходи, і цей спосіб є найпростішим для мене, тому що я використовую IWebBrowser2 і не маю 10 браузерів, з якими можна було б боротися:

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

Для мене прекрасно працює!

Одним із варіантів цього рішення для відповідних випадків є використання <button>тексту для тексту, який ви не бажаєте вибрати. Якщо ви прив'язуєтеся до clickподії на якомусь текстовому блоці та не хочете, щоб цей текст був обраний, зміна його на кнопку покращить семантику, а також не допустить вибору тексту.

<button>Text Here</button>

Найкращий і найпростіший спосіб, як я його знайшов, запобігає ctrl + c, клацнути правою кнопкою миші. У цьому випадку я заблокував усе, тому не потрібно нічого вказувати.

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