Evento JQuery para o usuário pressionar enter em uma caixa de texto?

250

Existe algum evento no Jquery que é acionado apenas se o usuário pressionar o botão Enter em uma caixa de texto? Ou qualquer plugin que possa ser adicionado para incluir isso? Caso contrário, como eu escreveria um plugin rápido que faria isso?

javascript jquery jquery-events Click Voto a favor
fonte

Respostas:

446

Você pode conectar seu próprio evento personalizado 

$('textarea').bind("enterKey",function(e){
   //do stuff here
});
$('textarea').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

http://jsfiddle.net/x7HVQ/

Jishnu AP
fonte
11
É importante notar que, em um cenário de detecção de entrada para impedir o envio de formulários, o evento "keyup" não é ideal porque o formulário detecta o envio no pressionamento de tecla. Assim, "keydown" ou "keypress" pode ser melhor nesse caso.
TechNyquist
7
Observe que o bind () está obsoleto no jQuery 3.0.
Bart Friederichs
Navegadores diferentes tem diferente e.keyCodepara algumas chaves, melhor usar e.which, isso garantirá que você manipulará o mesmo botão em todos os navegadores
Oleg Shakhov
99 
   $('#textbox').on('keypress', function (e) {
         if(e.which === 13){

            //Disable textbox to prevent multiple submit
            $(this).attr("disabled", "disabled");

            //Do Stuff, submit, etc..

            //Enable the textbox again if needed.
            $(this).removeAttr("disabled");
         }
   });
Etienne Dupuis
fonte
8
Obrigado - Esta solução foi adequada ao meu caso de uso. No entanto, é importante notar que, uma vez concluído qualquer processamento, você pode adicionar `$ (this) .removeAttr (" disabled ");` para reativar a caixa de texto.
Misterjaytee
39

Aqui está um plugin para você: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )

$.fn.pressEnter = function(fn) {  

    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

//use it:
$('textarea').pressEnter(function(){alert('here')})
Naftali tcp Neal
fonte
Agradável. Muito mais simples que o URL que publiquei. Eu me pergunto o que diabos o artigo que eu postei é tudo sobre e por que leva tanto de código ..
CaptSaltyJack
1
Tarde demais, eu já escrevi o meu: P. Ele também faz o mesmo trabalho em menos linhas. Além disso, o uso da $variável para o plug-in não é uma boa ideia, pois pode causar conflitos.
Clique na votação
@ Neal, você sabe como o código do plug-in que eu postei na resposta aceita teria que ser alterado, para que alguém pudesse fazer $("#myInput").bind('click, onEnter', myCallback);e funcionaria sem precisar de mais nada?
Click Upvote
1
@ClickUpvote # 1: remova-o da resposta - então podemos conversar.
Naftali aka Neal,
@Neal Homem solução incrível. Acabei de copiar essa função! obrigado!
Bilal Fazlani 24/03
17

aqui está um plugin jquery para fazer isso

(function($) {
    $.fn.onEnter = function(func) {
        this.bind('keypress', function(e) {
            if (e.keyCode == 13) func.apply(this, [e]);    
        });               
        return this; 
     };
})(jQuery);

Para usá-lo, inclua o código e configure-o assim:

$( function () {
    console.log($("input"));
    $("input").onEnter( function() {
        $(this).val("Enter key pressed");                
    });
});

jsfiddle aqui http://jsfiddle.net/VrwgP/30/

jzilla
fonte
2
Bom, eu chamaria o retorno de chamada usando func.apply(this), dessa forma, dentro da função de retorno de chamada que você pode usar thisnormalmente para acessar o elemento no qual o evento foi acionado.
Click Voto a favor
Sim, bom ponto sobre func.apply (this), nem sequer considerou isso.
jzilla
Bom e conciso, mas eu acrescentaria que interromper a propagação e os padrões seria uma boa ideia na maioria dos casos, para impedir qualquer envio de formulário. Basta adicionar e.preventDefault(); e.stopPropagation();dentro do if (e.keyCode)bit.
Irongaze.com
8

Deve-se notar que o uso live()no jQuery foi descontinuado desde a versão 1.7e foi removido no jQuery 1.9. Em vez disso, o uso de on()é recomendado.

Eu sugeriria altamente a seguinte metodologia para ligação, pois resolve os seguintes desafios em potencial:

  1. Ao vincular o evento document.bodye passar o seletor $ como o segundo argumento para on(), os elementos podem ser anexados, desanexados, adicionados ou removidos do DOM sem precisar lidar com eventos de ligação ou ligação dupla. Isso ocorre porque o evento é anexado ao document.bodyinvés de $selectordiretamente, o que significa que $selectorpode ser adicionado, removido e adicionado novamente e nunca carregará o evento associado a ele.
  2. Chamando off()antes on(), esse script pode residir no corpo principal da página ou no corpo de uma chamada AJAX, sem ter que se preocupar com eventos de ligação dupla acidental.
  3. Ao agrupar o script $(function() {...}), ele pode ser carregado novamente pelo corpo principal da página ou pelo corpo de uma chamada AJAX. $(document).ready()não é acionado por solicitações AJAX, enquanto o $(function() {...})é.

Aqui está um exemplo:

<!DOCTYPE html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var $selector = $('textarea');

        // Prevent double-binding
        // (only a potential issue if script is loaded through AJAX)
        $(document.body).off('keyup', $selector);

        // Bind to keyup events on the $selector.
        $(document.body).on('keyup', $selector, function(event) {
          if(event.keyCode == 13) { // 13 = Enter Key
            alert('enter key pressed.');
          }
        });
      });
    </script>
  </head>
  <body>

  </body>
</html>
Joshua Burns
fonte
4

Se sua entrada for search, você também pode usar on 'search'event. Exemplo

<input type="search" placeholder="Search" id="searchTextBox">

.

$("#searchPostTextBox").on('search', function () {
    alert("search value: "+$(this).val());
});
Phan Van Linh
fonte
3

Código HTML:-

<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />      

<input type="button" id="btnclick">

Código de script Java

function AddKeyPress(e) { 
        // look for window.event in case event isn't passed in
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('btnEmail').click();
            return false;
        }
        return true;
    }

Seu formulário não possui o botão Enviar padrão

yogesh lodha
fonte
2

Outra variação sutil. Fui para uma ligeira separação de poderes, por isso tenho um plug-in para permitir a captura da tecla enter, depois vinculo-me aos eventos normalmente:

(function($) { $.fn.catchEnter = function(sel) {  
    return this.each(function() { 
        $(this).on('keyup',sel,function(e){
            if(e.keyCode == 13)
              $(this).trigger("enterkey");
        })
    });  
};
})(jQuery);

E então em uso:

$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });

Essa variação permite usar a delegação de eventos (para vincular a elementos que você ainda não criou).

$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
Wilco
fonte
0

Não consegui keypressdisparar o evento para o botão enter e coçou a cabeça por algum tempo até ler os documentos do jQuery:

" O evento de pressionamento de tecla é enviado a um elemento quando o navegador registra a entrada do teclado. Isso é semelhante ao evento de pressionamento de tecla, exceto que as teclas modificadoras e que não imprimem, como Shift, Esc e excluem eventos de pressionamento de tecla, mas não os eventos de pressionamento de tecla. " ( https://api.jquery.com/keypress/ )

Eu tive que usar o evento keyupou keydownpara pressionar o botão Enter.

Arne M
fonte