Como desabilitar seleção de texto e imagem (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Saiba como desabilitar a seleção de texto e de imagens na interface do usuário de um aplicativo da Windows Store usando JavaScript.

Por padrão, um usuário não pode selecionar conteúdo na interface do usuário do seu aplicativo da Windows Store em JavaScript.

Para permitir a seleção de elementos com texto, imagens e outros tipos de conteúdo não proprietário, você pode substituir o comportamento padrão usando a propriedade CSS (Folhas de Estilos em Cascata): -ms-user-select.

A propriedade -ms-user-select dá suporte a estes valores:

  • nenhuma
    A seleção não é possível dentro do elemento. No entanto, o próprio elemento pode ser incluído em uma seleção. Este é o comportamento padrão do elemento body de nível superior e, por herança, de todos os elementos da interface do usuário em aplicativos da Windows Store em JavaScript.

  • elemento
    A seleção é possível dentro do elemento (e de todos os elementos filho). No entanto, a seleção é restrita aos limites do elemento.

  • texto
    A seleção é possível dentro do elemento e não é limitada aos limites do elemento.

Observação  É necessário definir essa propriedade para compartilhar conteúdo, bem como para copiar e colar da área de transferência.

 

O que você precisa saber

Tecnologias

Pré-requisitos

Este tópico presume que você é capaz de criar um aplicativo da Windows Store com JavaScript que use o modelo da Biblioteca do Windows para JavaScript.

Instruções

Comportamentos de seleção

A seleção é desabilitada para objetos que possuem um elemento pai com um manipulador de eventos click, MSGestureTap oumouseup definido.

Para substituir esse comportamento e habilitar a seleção mesmo se os manipuladores click, MSGestureTap ou mouseup estiverem presentes, aplique a propriedade CSS touch-select ao objeto e atribua a propriedade a um valor de grippers.

A seleção é cancelada se você chamar preventDefault de qualquer um dos seguintes manipuladores de eventos:

Desabilitar a seleção de todos os elementos da interface do usuário

Em alguns casos, é possível que você queira desabilitar especificamente a seleção de todos os elementos da interface do usuário no seu aplicativo.

Este exemplo exclui a seleção de todos os elementos da interface do usuário pela aplicação de -ms-user-select, com o valor de propriedade de none, ao elemento <html> e a todos os elementos filho editáveis.

Observação  Recomendamos que você também defina o valor da propriedade cursor como default para assegurar o feedback consistente da interface do usuário entre todos os elementos.

 

html  input, textarea, *[contenteditable=true] 
{
    -ms-user-select: none;
    cursor: default;
}

Habilitar a seleção de elementos não editáveis da interface do usuário

Se você desativar a seleção globalmente em seu aplicativo, mas gostaria de substituir essa definição para o conteúdo de um elemento específico da interface do usuário, basta aplicar o atributo -ms-user-select e definir o valor do atributo como element. Isso restringe a seleção aos limites do elemento.

Este exemplo permite a seleção do conteúdo de um elemento com a identificação especificada (incluindo o conteúdo dos elementos filho).

Observação  Recomendamos que você também defina explicitamente o valor da propriedade cursor como text para diferenciar o feedback da interface do usuário para esse elemento.

 

#selectableDiv 
{
    -ms-user-select: element;
    cursor: text;
}

Tópicos relacionados

Diretrizes para a seleção de texto e imagens

Exemplos

Exemplo de atributo CSS de áreas de conteúdo não selecionável com -ms-user-select