Como realçar automaticamente o texto após o clique do usuário

Algumas partes do conteúdo dos sites devem ser copiadas pelos usuários, como um endereço de URL, uma chave de API gerada automaticamente ou algumas linhas de código (snippets). Mas copiar esses conteúdos pode ser um desafio, especialmente para usuários que estão usando um trackpad ou um mouse de baixa qualidade. Então, vamos facilitar para eles.

Se você tropeçou em sites como o TheNextWeb, verá que o URL do link curto é destacado quando você clica nele. Vamos ver como isso é feito.

Começando

Para começar, criamos o HTML que envolve o URL de URL de atalho.

 
 Ligação curta 
  http://goo.gl/9JEpOz 
 
 

Nós temos o URL envolto em um período elemento junto com um ícone do Ionicon. O estilo desses elementos depende inteiramente do layout do site. Mas, para o propósito desta demonstração, eu estilizo desta maneira:

É simples, azul e quadrado (pegue os códigos de estilo aqui).

O JavaScript

E aqui está a carne do código, o JavaScript. O plano aqui é realce o URL enquanto os usuários clicam nele.

Começamos o código com uma variável que seleciona o elemento no qual o usuário clicará.

 var target = document.querySelector ('. shortlink'); 

o querySelector é um método JavaScript para selecionar o elemento; basicamente funciona como o construtor jQuery $ (). Você pode usar a notação de ponto para obter o elemento pela classe ou # notação para obter um elemento pelo ID.

Em seguida, precisamos criar uma nova função JavaScript.

 seleção de função (elem)  

Nós nomeamos nossa função como seleção(). E como você pode ver acima, a função requer um parâmetro para passar o elemento que encapsula o URL ou qualquer texto regular que gostaríamos de destacar. No nosso caso, isso seria o período elemento com o shortlink__url classe.

Dentro dessa função, adicionamos mais algumas variáveis:

 var target = document.querySelector ('. shortlink'); seleção de função (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Primeiro, o elem variável seleciona o elemento que passamos pelo parâmetro da função. A segunda variável, selecionar, executa uma função JavaScript nativa para obter a seleção de texto. A última variável, alcance controla o intervalo de seleção; Gostaríamos de garantir que a seleção é apenas dentro do elemento selecionado.

Em seguida, encadeamos essas variáveis ​​com algumas outras funções JavaScript da seguinte forma:

 var target = document.querySelector ('. shortlink'); seleção de função (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (intervalo);  

A primeira adição, range.selectNodeContents (elem), define o gama da seleção que neste caso é o elemento como sendo referido no elem. A última linha, select.addRange (intervalo) torna a seleção limitada ao intervalo especificado.

Ótimo! Estamos todos definidos com a função. Vamos colocar isso em ação.

Executá-lo

Nós ligamos o elemento alvo com um onclick evento. Quando o elemento é clicado, nós executamos a função que acabamos de fazer e passamos o parâmetro com o nome da classe do elemento onde o URL está empacotado; neste caso, é .shortlink__url.

 target.onclick = function () seleção ('. shortlink__url'); ; 

Acabamos. Como mencionado anteriormente, você também pode fazer isso para outros tipos de conteúdo em seu website, que talvez você queira que seus usuários copiem com mais facilidade.

Alguns de vocês podem estar se perguntando se poderíamos automaticamente cópia de, em vez de apenas destacar, o shorturl após o clique do usuário. Embora isso possa parecer uma boa ideia, infelizmente não é muito fácil de alcançar e pode causar uma má experiência do usuário. A ação de cópia deve estar totalmente sob o consentimento do usuário.

As etapas nesta postagem só levam a ação de destaque. Se nossos usuários copiariam ou não, depende inteiramente deles.

Você pode seguir os links a seguir para ver a demonstração ou baixar o código-fonte.

• Ver demonstração
• Fonte de download