it-swarm-pt.tech

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

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

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

132
Tyler

Na maioria dos navegadores, isso pode ser alcançado 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 atributo unselectable do elemento que você deseja não ser selecionável. Você pode definir isso usando um atributo em HTML:

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

Infelizmente, essa propriedade não é herdada, ou seja, você precisa colocar um atributo na tag de início 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"));
184
Tim Down
<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>

EDIT

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

41
dimarzionist

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;
32
Blowsie

Tente isto:

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

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

13
Stephen M. Redd

Para o Firefox você pode aplicar a declaração CSS "-moz-user-select" para "none". Confira sua documentação, ser-select.

É uma "prévia" do futuro "user-select" como eles dizem, então talvez Opera ou WebKit - navegadores baseados suportarão isso. Eu também lembro de encontrar 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 algumas funcionalidades dinâmicas falhem, você não deve realmente substituir o que os usuários esperam de uma página da Web, e é capaz de selecionar qualquer texto desejado.

11
Jorge Alves

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

::selection {
    background-color: transparent;
}

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

8
jlleblanc

Absolutamente posicione as divs sobre a área de texto com um z-index maior e dê a estas divs um gráfico de fundo transparente GIF .

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

6
Dave Rutledge

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

4
Alan Hensel

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

4
pdc

Aqui está um Sass mixin (scss) para os interessados. Bússola /CSS 3 não parece ter um mixin de seleção de 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 o faça de uma maneira mais robusta, isto é, apenas adicione suporte para os fornecedores que você escolheu.

3
rgb

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

Isso é verdade, mas a maioria das cópias, na minha experiência, não tem nada a ver com "ultimamente", com geeks ou determinados plagiadores ou qualquer coisa assim. Geralmente, é uma cópia casual de pessoas sem noção, e até mesmo uma proteção simples e facilmente derrotada (facilmente derrotada por pessoas como nós, por exemplo) funciona muito bem para detê-las. Eles não sabem nada sobre "ver fonte" ou caches ou qualquer outra coisa ... diabos, eles nem sabem o que é um navegador da web ou que eles estão usando um.

3
Big Bill

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

1
Wedge

Imagens podem ser selecionadas também.

Há limites para usar o JavaScript para cancelar a seleção de texto, como pode acontecer mesmo em locais onde você deseja selecionar. Para garantir uma carreira rica e bem-sucedida, evite todos os requisitos que precisam de habilidade para influenciar ou gerenciar o navegador além do normal ... a menos que, é claro, eles estejam pagando muito bem a você.

1
Kinjal Dixit

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

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

Se as abas são links e o retângulo pontilhado no estado ativo é preocupante, você pode removê-lo também (considere usabilidade, é claro).

1
Taylor Edmiston

Há muitas ocasiões em que a desativação da seleção aumenta a experiência do usuário.

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

1
kbcom

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

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