3

No CSS seria algo assim:

div {
    display: none;
}
div:active {
    display: block;
}

E alguma ação do usuário daria o foco a essa div pelo javascript

Sei que posso fazer adicionando e removendo uma classe/atributo porém quero fazer sem isso

tentei, sem sucesso:

document.getElementByTagName('div')[0].focus();

document.activeElement = document.getElementByTagName('div')[0];

1 Resposta 1

1

Acho que você está misturando as pseudo-classes :active com :focus. A primeira ocorre quando você clica e segura o clique sobre o elemento; a segunda é quando recebe o focus — são comportamentos distintos.

Neste caso você deveria usar:

div:focus {
   display: block;
}

Mas isso também não funcionaria porque não é possível dar focus a um elemento oculto.

Geralmente os que podem receber focus são elementos de formulários (inputs, selects etc.); divs podem receber se tiverem o atributo tabindex, como mostra o exemplo abaixo:

document.querySelector("div").focus();
div {
   opacity: .2;
}
div:focus {
   opacity: 1;
}
Clique fora do texto para tirar o focus da div:
<br>
<div tabindex="1">texto</div>

Concluindo, seu intento não é possível de realizar, principalmente com elementos ocultos.

Edit a pedido do autor

Como não se pode dar focus ao elemento oculto, pode colocar opacity: 0 e position: absolute. Assim o elemento ficará transparente e não irá ocupar espaço no layout:

document.querySelector("div").focus();
div {
   opacity: 0;
   position: absolute;
}
div:focus {
   opacity: 1;
   position: static;
}
Clique fora do texto para tirar o focus:
<br>
<div tabindex="1">texto</div> Texto texto

6
  • Então não é possível dar foco a um elemento oculto? Mesmo que seja com o opacity: 0 em vez de display: none
    – Costamilam
    Commented 27/05/2018 às 23:26
  • Isso, não é possível. O opacity não faz com que o elemento seja oculto, ele continua lá, apenas não aparece porque não tem opacidade.
    – Sam
    Commented 27/05/2018 às 23:28
  • Com opacity é possível, porque não é oculto, como mostrei no exemplo da resposta.
    – Sam
    Commented 27/05/2018 às 23:29
  • Dar focus a algo que não existe na tela vai até contra o conceito da função rs... Como vou focar algo que não faz parte do layout? :)
    – Sam
    Commented 27/05/2018 às 23:31
  • Então até da pra fazer algo como quero... colocar o opacity: 0; position: absolute; no elemento sem o foco e com o foco colocar opacity: 1; position: initial;
    – Costamilam
    Commented 27/05/2018 às 23:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .