Está tentando evitar que seus usuários consigam selecionar determinado texto de uma página web? Então vamos lá!
Você só vai precisar utilizar css para conseguir esta funcionalidade, e o melhor, ela funciona em todos os navegadores desktop e mobile a partir do internet explorer 10.
<style>
.usuarionaoseleciona {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Versões antigas do Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Chrome, Edge, Opera and Firefox */
pointer-events:none;
}
</style>
<h1>
Usuário consegue selecionar
</h1>
<h1 class="usuarionaoseleciona">
Usuário não consegue selecionar
</h1>No código acima agrupamos na classe usuarionaoseleciona todas as propriedades e seus respectivos aliases dos principais navegadores. Então sempre que precisar bloquear a seleção de texto em seu site é só utilizar esta classe nos elementos desejados.
Dica: Não utilize essa classe em elementos que possuem links, hover e outros conteúdos dinâmicos ela pode alterar seu funcionamento.
Recapitulando
E ai o que achou desta postagem, acha que precisa melhorar em algo? Não entendeu alguma parte ou encontrou algum erro? Deixe um comentário.
