Jump to content
Felipe Massulini

Como inserir o autofocus no botão?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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>  

 

  • +1 1

Share this post


Link to post
Share on other sites

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 =)

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.