it-swarm.com.ru

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

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

196
Dawid Ohia

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

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

Если вы используете пользовательский интерфейс jQuery, для этого есть способ, но он может обрабатывать только выбор мыши (т.е. 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; });
101
Damien

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

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

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

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

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);
12
Arvid Vermote
        $(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");
        });
8
deerhunter

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

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

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

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

Быстрый фрагмент, чтобы показать/доказать это вам:

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

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

6
Zach Barham

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

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

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
user1415855

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

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

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

0
Dave

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

<button>Text Here</button>
0
Nigel B. Peck