Existe uma maneira de tornar o texto não selecionável em uma página HTML?[duplicado]

Question

Essa pergunta já tem resposta aqui:

• Como desativar o destaque da seleção de texto? 40 respostas

Estou construindo uma UI HTML com alguns elementos de texto, como nomes de guias, que ficam ruins quando selecionados.Infelizmente, é muito fácil para um usuário clicar duas vezes no nome de uma guia, que a seleciona por padrão em muitos navegadores.

Talvez eu consiga resolver isso com um truque de JavaScript (também gostaria de ver essas respostas) - mas realmente espero que haja algo diretamente em CSS/HTML que funcione em todos os navegadores.

Answer 1

Na maioria dos navegadores, isso pode ser feito usando CSS:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Para IE <10 e Opera, você precisará usar o unselectable atributo do elemento que você deseja que não seja selecionável.Você pode definir isso usando um atributo em HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Infelizmente esta propriedade não é herdada, o que significa que você deve colocar um atributo na tag inicial de cada elemento dentro do <div>.Se isso for um problema, você poderia usar JavaScript para fazer isso recursivamente para os descendentes de um elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Answer 2

<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") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

EDITAR

O código aparentemente vem de http://www.dynamicdrive.com

Answer 3

Todas as variações CSS corretas são:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Answer 4

Experimente isto:

<div onselectstart="return false">some stuff</div>

Simples mas efetivo...funciona nas versões atuais de todos os principais navegadores.

Answer 5

Para Firefox você pode aplicar a declaração CSS "-moz-user-select" a "none".Confira a documentação deles, seleção de usuário.

É uma "prévia" da futura "seleção de usuário", como dizem, então talvez Ópera ou Kit Webnavegadores baseados em . suportarão isso.Também me lembro de ter encontrado algo para o Internet Explorer, mas não me lembro o quê :).

De qualquer forma, a menos que seja uma situação específica em que a seleção de texto faz com que alguma funcionalidade dinâmica falhe, você não deve realmente substituir o que os usuários esperam de uma página da Web, e isso é poder selecionar qualquer texto que desejarem.

Answer 6

Estou encontrando algum nível de sucesso com o CSS descrito aqui http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

Ele resolveu a maioria dos problemas que eu estava tendo com alguns ThemeRoller ul elementos em um aplicativo AIR (mecanismo WebKit).Ainda recebendo um pequeno (aprox.15 x 15) pedaço de nada que é selecionado, mas metade da página estava sendo selecionada antes.

Answer 7

Posicione absolutamente os divs sobre a área de texto com um índice z mais alto e dê a esses divs uma aparência transparente GIFs gráfico de fundo.

Observe depois de pensar um pouco mais - você precisaria ter essas 'capas' vinculadas, então clicar nelas o levaria para onde a guia deveria estar, o que significa que você poderia/deveria fazer isso com o elemento âncora definido como display:box, largura e altura definidas, bem como a imagem de fundo transparente.

Answer 8

Para um exemplo de por que pode ser desejável suprimir a seleção, consulte Linha do tempo SIMILE, que usa arrastar e soltar para explorar a linha do tempo, durante o qual o movimento vertical acidental do mouse faz com que os rótulos sejam destacados inesperadamente, o que parece estranho.

Answer 9

Para Safári, -khtml-user-select: none, assim como o da Mozilla -moz-user-select (ou, em JavaScript, target.style.KhtmlUserSelect="none";).

Answer 10

"Se seu conteúdo é realmente interessante, então há pouco que você pode fazer para protegê -lo"

Isso é verdade, mas a maior parte das cópias, na minha experiência, não tem nada a ver com “em última análise” ou geeks ou plagiadores determinados ou qualquer coisa assim.Geralmente é uma cópia casual feita por pessoas sem noção, e até mesmo uma proteção simples e facilmente derrotada (isto é, facilmente derrotada por pessoas como nós) funciona muito bem para detê-los.Eles não sabem nada sobre "visualizar código-fonte" ou caches ou qualquer outra coisa...caramba, eles nem sabem o que é um navegador da web ou que estão usando um.

Answer 11

Aqui está um Atrevido mixin (scss) para os interessados. Bússola/CSS 3 parece não ter um mixin de seleção do usuário.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Embora o Compass fizesse isso de uma forma mais robusta, ou seja,adicione suporte apenas para fornecedores que você escolheu.

Answer 12

Se parecer ruim, você pode usar CSS para alterar a aparência das seções selecionadas.

Answer 13

Qualquer método JavaScript ou CSS é facilmente contornado com o Firebug (como o caso do Flickr).

Você pode usar o ::selection pseudo-elemento em CSS para alterar a cor de destaque.

Se as guias forem links e o retângulo pontilhado em estado ativo é preocupante, você também pode removê-lo (considere a usabilidade, é claro).

Answer 14

Há muitas ocasiões em que desativar a seletividade melhora a experiência do usuário.

Por exemplo, permitir ao usuário copiar um bloco de texto na página sem copiar o texto de quaisquer elementos de interface associados a ele (que ficariam intercalados no texto que está sendo copiado).

Answer 15

As imagens também podem ser selecionadas.

Existem limites no uso de JavaScript para desmarcar texto, pois isso pode acontecer mesmo em locais onde você deseja selecionar.Para garantir uma carreira rica e bem-sucedida, evite todos os requisitos que exigem capacidade de influenciar ou gerenciar o navegador além do comum...a menos, é claro, que eles estejam pagando extremamente bem.

Answer 16

O seguinte funciona no Firefox de maneira interessante, se eu remover a linha de gravação, ela não funciona.Alguém tem alguma ideia de por que a linha de gravação é necessária.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>