Eu tenho uma entrada de texto e um botão (veja abaixo). Como posso usar JavaScript para acionar o evento de clique do botão quando a Entertecla é pressionada dentro da caixa de texto?
Já existe um botão de envio diferente na minha página atual, então não posso simplesmente transformar o botão em um botão de envio. E eu só quero que a Entertecla clique nesse botão específico se for pressionada nessa caixa de texto e nada mais.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
javascript
button
onclick
onkeypress
kdenney
fonte
fonte
Respostas:
No jQuery, o seguinte funcionaria:
Ou em JavaScript simples, o seguinte funcionaria:
fonte
keydown
Nãokeyup
é o melhor evento para usar. Além disso, se você estiver usando o asp.net, será necessárioreturn false
no final parar o asp.net de ainda interceptar o evento.keydown
é que manter pressionado enter disparará o evento repetidamente. se você se conectar aokeyup
evento, ele será acionado apenas quando a chave for liberada.event.preventDefault();
antes de invocarclick();
a função enquanto a minha página tem um formulário e eu tenho mudadokeyup
comkeypress
como era o manipulador trabalhando apenas para mim, de qualquer forma, obrigado por peça puro de código!Em seguida, basta codificá-lo!
fonte
Descobri isso:
fonte
Torne o botão um elemento de envio, para que seja automático.
Observe que você precisará de um
<form>
elemento contendo os campos de entrada para fazer esse trabalho (obrigado Sergey Ilinsky).Não é uma boa prática redefinir o comportamento padrão; a Enterchave sempre deve chamar o botão enviar em um formulário.
fonte
<form>
tags são descartadas pelo analisador de HTML liberal. Então eu tenho que sequestrar pressionamentos de teclas ou falhar. (Aliás, Pressionar Enter no modo de lançamentos Editar SharePoint por algum motivo acho que a fita é usando a mesma forma..)<button type="submit" onclick="return doSomething(this)">Value</button>
trabalha para. A pista está dentro dareturn
palavraComo ninguém usou
addEventListener
ainda, aqui está minha versão. Dados os elementos:Eu usaria o seguinte:
Isso permite alterar o tipo e a ação do evento separadamente, mantendo o HTML limpo.
fonte
e.preventDefault()
para fazê-lo funcionar com formulários. Veja minha (nova) resposta .if (event.keyCode == 13) { event.preventDefault(); go.click();}
Em JavaScript simples,
Notei que a resposta é dada apenas no jQuery, então pensei em fornecer algo em JavaScript simples também.
fonte
evt.which ? evt.which : evt.keyCode
é igual aevt.which || evt.keyCode
Um truque básico que você pode usar para isso que eu não vi completamente mencionado. Se você deseja executar uma ação ajax ou algum outro trabalho sobre Enter, mas não deseja realmente enviar um formulário, é possível:
Definindo ação = "javascript: void (0);" como este é um atalho para impedir essencialmente o comportamento padrão. Nesse caso, um método é chamado se você pressionar enter ou clicar no botão e uma chamada ajax será feita para carregar alguns dados.
fonte
searchCriteria.blur();
aoonsubmit
.Tente:
fonte
Para acionar uma pesquisa sempre que a tecla Enter for pressionada, use o seguinte:
fonte
Isso é apenas algo que eu tenho de um projeto um tanto recente ... Encontrei na net e não faço ideia se existe uma maneira melhor ou não no JavaScript antigo.
fonte
Use
keypress
eevent.key === "Enter"
com o JS moderno!Documentos do Mozilla
Navegadores suportados
fonte
Embora eu tenha certeza de que, enquanto houver apenas um campo no formulário e um botão de envio, pressionar Enter deve enviar o formulário, mesmo se houver outro formulário na página.
Em seguida, você pode capturar o formulário no envio com js e fazer a validação ou retorno de chamada que desejar.
fonte
Ninguém notou o atributo html "accesskey", que está disponível há algum tempo.
Esta é uma maneira sem javascript de atalhos de teclado.
A tecla de acesso atribui atalhos no MDN
Destinado a ser usado assim. O atributo html em si é suficiente, mas podemos mudar o espaço reservado ou outro indicador, dependendo do navegador e do sistema operacional. O script é uma abordagem de rascunho não testada para dar uma idéia. Você pode querer usar um detector de biblioteca de navegador como o pequeno bowser
fonte
s
.Esta é uma solução para todos os amantes de YUI por aí:
Nesse caso especial, obtive melhores resultados usando o YUI para acionar objetos DOM que foram injetados com a funcionalidade do botão - mas essa é outra história ...
fonte
Em Angular2 :
Se você não deseja um feedback visual no botão, é um bom design não fazer referência ao botão, mas sim invocar diretamente o controlador.
Além disso, o ID não é necessário - outra maneira de separar o NG2 entre a visualização e o modelo.
fonte
Nesse caso, você também deseja ativar o botão enter de Postagem no servidor e executar o script Js.
fonte
Essa tentativa de troca está próxima, mas se comporta mal em relação ao navegador na época (no Safari 4.0.5 e Firefox 3.6.3), portanto, no final das contas, eu não recomendaria.
fonte
Use-o ao manipular o evento ou na função que seu manipulador de eventos chama.
Funciona pelo menos no Internet Explorer e Opera.
fonte
Para jquery mobile eu tive que fazer
fonte
.live
foi descontinuado no jQuery 1.7. Ainda é considerado bom no jQuery Mobile?Para adicionar uma solução de JavaScript completamente claro que dirigiu @ questão de icedwater com o envio do formulário , aqui está uma solução completa com
form
.Violino: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
Javascript
fonte
No Javascript moderno e sem reprovação (sem
keyCode
ouonkeydown
):fonte
Heres meus dois centavos. Estou trabalhando em um aplicativo para Windows 8 e quero que o botão registre um evento de clique quando pressiono o botão Enter. Eu estou fazendo isso em JS. Tentei algumas sugestões, mas tive problemas. Isso funciona muito bem.
fonte
charCode
dos 13 em qualquer outro lugar, está disparandoprintResult()
.Para fazer isso com o jQuery:
Para fazer isso com JavaScript normal:
fonte
Para quem gosta de brevidade e abordagem js moderna.
onde input é uma variável que contém seu elemento de entrada.
fonte
Para JS moderno
keyCode
está obsoleta, utilizekey
vezfonte
No jQuery, você pode usar
event.which==13
. Se você tiver umform
, poderá usar$('#formid').submit()
(com os ouvintes de eventos corretos adicionados ao envio do referido formulário).fonte
Eu desenvolvi javascript personalizado para alcançar esse recurso, apenas adicionando classe
Exemplo:
<button type="button" class="ctrl-p">Custom Print</button>
Aqui Confira o Fiddle
- ou -
confira o exemplo em execução https://stackoverflow.com/a/58010042/6631280
fonte
Isso também pode ajudar, uma pequena função JavaScript, que funciona bem:
Sei que esta questão está resolvida, mas acabei de encontrar algo que pode ser útil para outras pessoas.
fonte