Como inserir o autofocus no botão?

[Felipe Massulini 0]

Bom dia pessoal. 

 

No menu do meu projeto, apenas tem um botão com uma lupa, e quando ele é clicado, abre o campo de texto para ser pesquisado. Porém quando clico nele, preciso clicar novamente no campo de texto para que eu possa digitar. 

 

Gostaria de saber como faço para que o clique da lupa, ja abra o campo de texto com o cursor nele pronto para digitar.

 

Obs: Sou iniciante.

[lciceris 7]

Fala @Felipe Massulini, da pra fazer isso de um jeito bem simples com javascript.

 

- Primeiro passo é colocar um id na sua lupa, para identificarmos quando o usuário clicar ali. (#idDaLupa no código)

- Depois colocar um id no input que vai receber o foco. (idDoInputQueVaiSerFocado no código)

- No código abaixo primeiro identificamos o evento de clique na lupa e posterior setamos o focus para o input.

 

Para funcionar você só precisa alterar o #idDaLupa e o idDoInputQueVaiSerFocado para os ids que setar no seu html.

<script>
document.querySelector('#idDaLupa').addEventListener('click', function () {
  document.getElementById('idDoInputQueVaiSerFocado').focus();
});
</script>  

 

[Matheus Tavares 167]

Excelente contribuição, @lciceris. +1 por usar JS nativo.

 

Vou apenas complementar o que já está correto, para o caso de o @Felipe Massulini estar utilizando jQuery, o que é bem comum, ainda mais para quem está começando...

$( document ).ready( function() {
    $( '#idDaLupa' ).on( 'click', function() {
        //aqui vem o código que insere/exibe o input
        $( '#meuInput' ).focus();
    } );
} );

 

E boas-vindas aos dois =)

[Felipe Massulini 0]

Obrigado @lciceris e @Matheus Tavares pela contribuição, mas ainda continuo com o problema. Os campos já tem Ids, não criei outras, apenas usei as que estavam, mas não funcionou. Poderiam me dar mais uma luz ? 

 

Esse é o código JS:

 

 

function botao_busca() {
    var campo = document.getElementById("campo-busca").value;
    if (campo == '') {
            if (document.getElementById('campo-busca').style.display == 'none') {
                document.getElementById('campo-busca').style.display = 'block';
            } else {
                document.getElementById('campo-busca').style.display = 'none';
        }
    } else {
        document.getElementById("frm-busca").submit();
    }
    return false;
}

 

E aqui o código html: 

 

<div class="busca">
     <form method="get" action="<?php bloginfo('url'); ?>" id="frm-busca">
     <input required type="text" name="s" id="campo-busca" placeholder="Buscar por..." value="" style="display: none;" />
     <button type="button" onclick="botao_busca()"><i class="sprite sprite-busca"></i></button>
          </form>
</div>

 

 

[Matheus Tavares 167]

function botao_busca() {
    var campo = document.getElementById("campo-busca");
  
    if (campo.value == '') {
            if (campo.style.display == 'none') {
                campo.style.display = 'block';
                campo.focus();//<------ aqui você foca no campo-busca
            } else {
                campo.style.display = 'none';
        }
    } else {
        document.getElementById("frm-busca").submit();
    }
    return false;
}

Sacou?