1

No site em que estou desenvolvendo, há um campo de pesquisa que só mostra o input quando clica em cima do botão.

Agora quero fechar o input quando clicar na tecla Esc (quando o foco estiver no campo). Fiz uma função em jQuery, porém não está funcionando:

FUNÇÃO:

$('#campo-pesquisa').keypress(function(e) {
    if(e.keyCode === 27) $('#fechar-campo').click();
});

CÓDIGO HTML

<div class="form-pesquisa">
                    <form class="input-group" id="campo-pesquisa" action="{{ url }}busca">
                        <input type="text" class="form-control border-right-0" id="input-pesquisa" name="q"
                               aria-label="Campo de busca" placeholder="O que deseja procurar?">
                        <div class="input-group-append">
                            <span class="input-group-text" id="search">
                                <button type="submit">
                                    <span class="ocultaVisualmente">Buscar</span>
                                    <i class="fas fa-search"></i>
                                </button>
                            </span>
                            <span class="input-group-text" id="close-pesquisa">
                                <button type="reset" id="fechar-campo">
                                    <span class="ocultaVisualmente">Fechar Campo de Pesquisa</span>
                                    <i class="fas fa-times"></i>
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
1
  • E o código que trata do click em #fechar-campo?
    – Woss
    11/06/2018 às 20:52

1 Resposta 1

1

O keypress só detecta teclas com caracteres printáveis (letras, números, espaço etc).

Documentação MDN:

inserir a descrição da imagem aqui

Use keydown que detecta todas as teclas, logo a tecla ESC será detectada:

$('#campo-pesquisa').keydown(function(e) {
    if(e.keyCode === 27) $('#fechar-campo').click();
});
1

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 .