Как отключить выделение текста с помощью jQuery?


198

Имеет ли jQuery или jQuery-UI какие-либо функции для отключения выделения текста для заданных элементов документа?



@John: Ссылка выше отвечает на ваш вопрос? Если этого не произойдет, вы можете добавить более подробную информацию о том, как ваша ситуация отличается.
Йорн Шоу-Роде

1
Да, это так. Но хотя ответ один и тот же, этот вопрос очень специфичен, поэтому многие могут пропустить этот ответ, имея в виду более общий вопрос (как и я).
Давид Охия

@Jhon: у другого вопроса тоже есть решение jQuery.
Омар Абид

Ответы:


274

В jQuery 1.8 это можно сделать следующим образом:

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

1
Альтернатива JavaScript работает только для IE. «onselectstart» не доступен для других браузеров
Омар Абид

13
@ Омар: я хорошо это знаю.
SLaks


11
Спасибо за это. Я работал над перетаскиванием слайдера, и мне нужен был способ, чтобы текст не выделялся в процессе.
Спенсер Рупорт

35
Тем из вас, кто скажет «просто не надо» отключать выбор текста (или что-то еще в SO на этот счет), немного откройте свои умы. Часто люди отключают его по эстетическим причинам, например, избегая выделения текста двойным щелчком на ярлыке с текстом и т. Д. Поэтому либо ответьте на вопрос, либо укажите реальный контрапункт и укажите, что вы говорите, отрицая, дон не просто выцарапайте идею в общем виде.
dudewad

102

Если вы используете jQuery UI, для этого есть метод, но он может обрабатывать только выбор мыши (т. Е. CTRL+ Все Aеще работает):

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

Код очень прост, если вы не хотите использовать 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; });

1
функция jquery ui была бы хороша, но она не обеспечивает такой же уровень защиты, она не позволяет выбирать вещи напрямую, но если вы переносите выбор из другого объекта dom, вам также нужны правила css - вот функция = function () {return this.bind (($ .support.selectstart? "selectstart": "mousedown") + ".ui-disableSelection", function (event) {event.preventDefault ();}); }
chrismarx

2
Обратите внимание, что disableSelection () устарела в jQuery UI 1.9
марта,

Также может потребоваться .on ('mousedown', false) для работы, в зависимости от вашего браузера. Однако, по умолчанию опасно убивать события mousedown, потому что это может привести к потере существующей функциональности
Dan

1
Arg. Это раздражает, это обесценилось. Есть много времени, когда вы хотите этого на законных основаниях.
Чак Ле Батт

Я создаю контекстное меню правой кнопкой мыши на некотором якорном тексте и не хочу, чтобы текст выделялся при щелчке. Так что да, @Monk, это будет рассматриваться как законный пример.
Уэйн Смоллмен

75

Я нашел этот ответ ( Prevent Highlight of Text Table ) наиболее полезным, и, возможно, его можно объединить с другим способом обеспечения совместимости с IE.

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

Chrome использует -webkit-user-select
Тим

3
Всегда цените способ CSS делать вещи вместо использования jQuery или JS в целом. Так же, как анимации jQuery и CSS-переходы, встроенный в браузер способ всегда будет лучшим и наиболее эффективным.
Брайан Лейшман

17

Вот более полное решение для выбора отключения и отмены некоторых из горячих клавиш (таких как 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)

3
Почему ты звонишь attr('unselectable', 'on')дважды? Это опечатка или она полезна?
КаджМагнус

Это прекрасно сработало для меня, но мне пришлось отключить ".each (function () {$ (this) .attr ('unselectable', 'on') .bind ('selectstart', function () {return false;} );}); " раздел для моего конкретного веб-приложения (JQuery Mobile), на всякий случай, если оно кому-нибудь поможет ..
Энтони,

13

Следующее действие отключило бы выбор всех элементов item во всех распространенных браузерах (IE, Chrome, Mozilla, Opera и Safari):

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

1
Не сложно - отлично! Спасибо. Для инвалидов; Я addded .attr ( 'инвалид', 'инвалид')
свободную волю

Обновление: вместо .attr («отключен», «отключен») я использовал .attr («только для чтения», «только для чтения»). Отключено предотвращает публикацию моей переменной модели в MVC (переменная модели равна нулю). Readonly по-прежнему отключил просмотр (я использую начальную загрузку), и это позволяет опубликовать значение элемента
свободно

Отлично, брат, я использую этот код для замены «pointer-events: none;», который не работает в IE 11. С уважением
Shortys Oberto Dutari

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

Не могли бы вы написать краткое резюме ответа в дополнение к коду?
Джонса

6

Это легко сделать с помощью 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>

Это здорово! Но как нам остановить «фокус» на этом?
Мутаник

3
Этот ответ устарел к 2013 году
Дан

6

Это на самом деле очень просто. Чтобы отключить выделение текста (а также нажать + перетаскивание текста (например, ссылку в Chrome)), просто используйте следующий код jQuery:

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

Все это делает предотвратить дефолт из происходит при нажатии кнопки с помощью мыши ( mousedown()) в bodyи htmlтегах. Вы можете очень легко изменить элемент , просто изменив текст в промежутке между двумя кавычками (например , изменения $('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. Test: Cmd+a и Cmd+c)

также, используя этот раздел ответа Владимира выше. (зайдите на его пост здесь )


1

1 линия решение для ХРОМА:

body.style.webkitUserSelect = "none";

и FF:

body.style.MozUserSelect = "none";

IE требует установки атрибута unselectable (подробности внизу).

Я проверил это в Chrome, и он работает. Это свойство наследуется, поэтому установка его в элементе body отключит выделение во всем документе.

Подробности здесь: http://help.dottoro.com/ljrlukea.php

Если вы используете Closure, просто вызовите эту функцию:

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

1

Я думаю, что этот код работает во всех браузерах и требует наименьших затрат. Это действительно гибрид всех вышеперечисленных ответов. Дайте мне знать, если найдете ошибку!

Добавить 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();

1

Я испробовал все подходы, и этот самый простой для меня, потому что я использую IWebBrowser2 и у меня нет 10 браузеров, с которыми приходится бороться:

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

У меня отлично работает!


0

Одним из решений этой проблемы в соответствующих случаях является использование <button>текста, который вы не хотите выбирать. Если вы привязываете clickсобытие к какому-либо текстовому блоку и не хотите, чтобы этот текст можно было выбирать, изменение его на кнопку улучшит семантику, а также предотвратит выделение текста.

<button>Text Here</button>

-1

Лучший и самый простой способ, которым я нашел это, предотвращает Ctrl + C, щелчок правой кнопкой мыши. В этом случае я заблокировал все, поэтому мне не нужно ничего указывать.

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.