Como desativar a seleção de texto usando o jQuery?

198

O jQuery ou a jQuery-UI possuem alguma funcionalidade para desativar a seleção de texto para determinados elementos do documento?

Dawid Ohia
fonte
3
Possível duplicata: stackoverflow.com/questions/1319126/prevent-highlight-of-text
Jørn Schou-Rode
@ John: O link acima responde à sua pergunta? Caso contrário, convém dar mais detalhes sobre como a sua situação é diferente.
Jørn Schou-Rode
1
Sim. Mas, embora a resposta seja a mesma, essa pergunta é muito específica; muitos podem perder a resposta, tendo em mente uma pergunta mais geral (como eu fiz).
Dawid Ohia
@ Jon: A outra pergunta também tem uma solução jQuery.
Omar Abid

Respostas:

274

No jQuery 1.8, isso pode ser feito da seguinte maneira:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);
SLaks
fonte
1
A alternativa JavaScript funciona apenas para o IE. "onselectstart" não está disponível para outros navegadores
Omar Abid
13
@ Omar: Estou bem ciente disso.
SLaks
11
Obrigado por isso. Eu estava trabalhando em um controle deslizante de arrastar e precisava de uma maneira que o texto não fosse selecionado no processo.
Spencer Ruport
35
Para aqueles de vocês que dizem "simplesmente não" para desativar a seleção de texto (ou qualquer outra coisa no SO), abra suas mentes um pouco. Muitas vezes, as pessoas o desabilitam por razões estéticas, como evitar a seleção de texto com um clique duplo de um rótulo com o texto, etc. Portanto, responda à pergunta ou forneça um contraponto real e especifique o que você está falando de negar, não basta riscar a idéia de uma maneira geral.
Dudewad #
102

Se você usa a interface do usuário do jQuery, existe um método para isso, mas ele pode lidar apenas com a seleção do mouse (ou seja, CTRL+ Aainda está funcionando):

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

O código é realmente simples, se você não quiser usar a interface do usuário do 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; });
Damien
fonte
1
a função jquery ui seria ótima, mas não oferece o mesmo nível de proteção, impede a seleção direta das coisas, mas se você estiver carregando uma seleção de outro objeto dom, também precisará das regras css - aqui está a função = function () {return this.bind (($ .support.selectstart? "seleciona start": "mousedown") + ".ui-disableSelection", função (evento) {event.preventDefault ();}); }
chrismarx 4/08
2
Observe que disableSelection () foi descontinuado na jQuery UI 1.9
mar10
Também pode exigir .on ('mousedown', false) para funcionar, dependendo do seu navegador. Hovewer, é perigoso para matar eventos mousedown por padrão, porque isso poderia provavelmente freio funcionalidade existente
Dan
1
Arg. É irritante ter sido depreciado. Há muito tempo quando você deseja isso legitimamente.
quer tocar hoje
Estou criando um menu de contexto com o botão direito do mouse em algum texto âncora e não quero que o texto seja selecionado ao clicar. Então, sim, @Monk, isso se qualificaria como um exemplo legítimo.
Wayne Smallman
75

Achei esta resposta ( Evitar destaque da tabela de texto ) mais útil e talvez possa ser combinada com outra maneira de fornecer compatibilidade com o IE.

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
Plynx
fonte
O Chrome usa -webkit-user-select
tim
3
Sempre aprecie a maneira CSS de fazer as coisas, em vez de usar jQuery ou JS em geral. Assim como as animações jQuery versus transições CSS, o caminho incorporado no navegador sempre será o melhor e mais eficiente.
Brian Leishman
17

Aqui está uma solução mais abrangente para a seleção de desconexão e o cancelamento de algumas das teclas de atalho (como Ctrl+ ae Ctrl+ c. Teste: Cmd + ae 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);

e chame exemplo:

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

jsfiddle.net/JBxnQ/

Isso também pode não ser suficiente para versões antigas do FireFox (não sei qual). Se tudo isso não funcionar, adicione o seguinte:

.on('mousedown', false)
Vladimir
fonte
3
Por que você liga attr('unselectable', 'on')duas vezes? É um erro de digitação ou é útil?
KajMagnus 02/02/12
Isso funcionou muito bem para mim, mas tive que desativar o ".each (function () {$ (this) .attr ('unselectable', 'on') .bind ('selectstart', function () {return false;} );}); " seção para minha especial web app (JQuery Mobile), apenas no caso de ele ajuda ninguém ..
Anthony
13

O seguinte desabilitaria a seleção do 'item' de todas as classes em todos os navegadores comuns (IE, Chrome, Mozilla, Opera e Safari):

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);
Arvid Vermote
fonte
1
Não é complicado - excelente! Obrigado. Para deficientes visuais; I addded .attr ( 'deficiente', 'deficientes')
o livre arbítrio
Atualização: em vez de .attr ('disabled', 'disabled'), usei .attr ('readonly', 'readonly'). Desativado impede a publicação da minha variável de modelo no MVC (a variável do modelo é nula). Readonly ainda ter desativado procurando (eu uso de bootstrap) e permite postar o valor do item
o livre arbítrio
Excelente bro, i usando este código para substituir "ponteiro-eventos: none;", que não trabalho no IE 11. Considera
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");
        });
Deerhunter
fonte
Você poderia escrever um breve resumo da resposta, além do código?
Jsca #
6

Isso pode ser feito facilmente usando JavaScript Isso é aplicável a todos os navegadores

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

Ligue para esta função

<script type="text/javascript">
   disableSelection(document.body)
</script>
Code Spy
fonte
Este é ótimo! Mas como paramos o "foco" nele?
precisa saber é o seguinte
3
Esta resposta está desatualizada em 2013
Dan
6

Isso é realmente muito simples. Para desativar a seleção de texto (e também clicar em + arrastar texto (por exemplo, um link no Chrome)), basta usar o seguinte código jQuery:

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

Tudo isso impede que o padrão aconteça quando você clica com o mouse ( mousedown()) nas tags bodye html. Você pode facilmente alterar o elemento apenas alterando o texto entre as duas aspas (por exemplo, mude $('body, html')para $('#myUnselectableDiv')para tornar a myUnselectableDivdiv, assim, não selecionável.

Um snippet rápido para mostrar / provar isso para você:

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

Observe que esse efeito não é perfeito e tem o melhor desempenho, tornando a janela inteira não selecionável. Você também pode querer adicionar

o cancelamento de algumas das teclas de atalho (como Ctrl+ae Ctrl+c. Teste: Cmd+a e Cmd+c)

também, usando a seção da resposta de Vladimir acima. (acesse o post dele aqui )

Zach Barham
fonte
1

Solução de 1 linha para o CHROME:

body.style.webkitUserSelect = "none";

e FF:

body.style.MozUserSelect = "none";

O IE requer a configuração do atributo "não selecionável" (detalhes na parte inferior).

Eu testei isso no Chrome e funciona. Esta propriedade é herdada, portanto, defini-la no elemento body irá desativar a seleção em todo o documento.

Detalhes aqui: http://help.dottoro.com/ljrlukea.php

Se você estiver usando o Closure, basta chamar esta função:

goog.style.setUnselectable(myElement, true);

Ele lida com todos os navegadores de forma transparente.

Os navegadores não-IE são tratados desta maneira:

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

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

A parte do IE é tratada assim:

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);
  }
}
user1415855
fonte
1

Eu acho que esse código funciona em todos os navegadores e requer o mínimo de sobrecarga. É realmente um híbrido de todas as respostas acima. Deixe-me saber se você encontrar um bug!

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

Adicione jQuery:

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

Opcional: Para desativar também a seleção de todos os elementos filhos, é possível alterar o bloco IE para:

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

Uso:

$('.someclasshere').disableSelection();
Justin
fonte
1

Eu tentei todas as abordagens, e essa é a mais simples para mim, porque estou usando o IWebBrowser2 e não tenho 10 navegadores para lidar com:

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

Funciona perfeitamente para mim!

Dave
fonte
0

Uma solução para isso, nos casos apropriados, é usar a <button>para o texto que você não deseja selecionar. Se você está vinculando o clickevento em algum bloco de texto e não deseja que o texto seja selecionável, alterá-lo para um botão melhorará a semântica e também impedirá que o texto seja selecionado.

<button>Text Here</button>
Nigel B. Peck
fonte
-1

A maneira melhor e mais simples que eu encontrei, evita ctrl + c, clique direito. Nesse caso, bloqueei tudo, para não precisar especificar nada.

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