Angular suporta isso fora da caixa. Você já tentou o ngSubmit no seu elemento de formulário?
<form ng-submit="myFunc()" ng-controller="mycontroller">
<input type="text" ng-model="name" />
<br />
<input type="text" ng-model="email" />
</form>
EDIT: pelo comentário sobre o botão enviar, consulte Enviando um formulário pressionando enter sem um botão enviar, que fornece a solução de:
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Se você não gostar da solução oculta do botão de envio, precisará vincular uma função do controlador ao evento Enter ou pressionar a tecla Enter. Isso normalmente requer uma diretiva personalizada, mas a biblioteca AngularUI já possui uma boa solução de pressionamento de tecla. Veja http://angular-ui.github.com/
Após adicionar a lib angularUI, seu código seria algo como:
<form ui-keypress="{13:'myFunc($event)'}">
... input fields ...
</form>
ou você pode vincular a tecla Enter a cada campo individual.
Além disso, consulte estas perguntas de SO para criar uma diretiva keypres simples:
Como posso detectar onKeyUp no AngularJS?
EDIT (28/08/2014): No momento em que essa resposta foi escrita, ng-keypress / ng-keyup / ng-keydown não existia como diretivas nativas no AngularJS. Nos comentários abaixo, @ darlan-alves tem uma solução muito boa com:
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
ng-submit="join()"
um controlador de registro que tinha$scope.join = function() {...}
e alterava o nome dessa função para quefoo()
o envio do botão enter funcionasse novamente.ng-keyup="$event.keyCode == 13 && myFunc()"
Realmente :) incrívelSe você deseja chamar a função sem formulário, pode usar minha diretiva ngEnter:
Javascript :
HTML :
Submeto outras diretrizes impressionantes no meu twitter e na minha conta principal .
fonte
keydown
ekeypress
sem vírgula para delimitá-los significa que ambos podem ser acionados simultaneamente. É provável que ocorram erros $ rootScope: inprog. A adição de uma vírgula entre eles cria um disjuntivo e garante que apenas ocorra o ciclo $ digest. Não foi possível aplicar a edição, pois é apenas um caractere.Se você tiver apenas uma entrada, poderá usar a tag do formulário.
Se você possui mais de uma entrada ou não deseja usar a tag de formulário ou deseja anexar a funcionalidade da tecla enter a um campo específico, é possível incorporá-la a uma entrada específica da seguinte maneira:
fonte
Eu queria algo um pouco mais extensível / semântico do que as respostas fornecidas, então escrevi uma diretiva que pega um objeto javascript de maneira semelhante à incorporada
ngClass
:HTML
Os valores do objeto são avaliados no contexto do escopo da diretiva - verifique se estão entre aspas simples, caso contrário todas as funções serão executadas quando a diretiva for carregada (!)
Então, por exemplo: em
esc : 'clear()'
vez deesc : clear()
Javascript
fonte
'vm.doTheThing("myVar")'
Outra abordagem seria usar ng-keypress,
Envie uma entrada ao pressionar Enter com AngularJS - jsfiddle
fonte
Diretiva muito boa, limpa e simples com shift + enter support:
fonte
Se você deseja validação de dados também
A adição importante aqui é
$loginForm.$valid
que validará o formulário antes de executar a função. Você precisará adicionar outros atributos para validação que estão além do escopo desta pergunta.Boa sorte.
fonte
Só queria ressaltar que, no caso de haver um botão de envio oculto, você pode simplesmente usar a diretiva ngShow e configurá-la como false da seguinte forma:
HTML
fonte
<button ng-show="false"></button>
é ainda mais curto. Não há necessidade de definir o valor de um botão invisível.type="submit"
... Suponho que o valor possa ser ignorado, mas acredito que a primeira seja necessária.Use ng-submit e apenas agrupe as duas entradas em tags de formulário separadas:
O agrupamento de cada campo de entrada em sua própria tag de formulário permite que ENTER chame o envio em qualquer formulário. Se você usar uma tag de formulário para ambos, precisará incluir um botão de envio.
fonte
Será um pouco mais limpo usando uma classe CSS em vez de repetir estilos embutidos.
CSS
HTML
fonte
FWIW - Aqui está uma diretiva que eu usei para um modal básico de confirmação / alerta de inicialização, sem a necessidade de um
<form>
(basta mudar a ação de clique do jQuery para o que quiser e adicionar
data-easy-dismiss
à sua tag modal)fonte