Jquery: como acionar um evento de clique ao pressionar a tecla Enter

165

Preciso executar um evento de clique no botão ao pressionar a tecla Enter.

Como está no momento, o evento não está disparando.

Por favor, me ajude com a sintaxe, se possível.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

esta é minha tentativa de disparar um evento de clique ao entrar.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});
jquery key-events Arianule
fonte
Você pode ter que incluir uma falsa retorno ou umae.preventDefault();
geekchic
4
Como uma nota lateral: e.keyCodenão é completamente um navegador cruzado. use em e.whichvez disso.
Hashem Qolami
4
Nesse caso, você DEVE usar em keyupvez de keypressou keydown. keypress/ keydownEventos acionar continuamente enquanto a tecla é pressionada: jsbin.com/uzoxuk/1/edit
Hashem Qolami

Respostas:

307

tente isso ....

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Mostrar snippet de código

Encontre demonstração em jsbin.com

Vijay
fonte
3
No caso de pessoas querem reconhecer o "enter" keypress de qualquer lugar, você pode substituir o $ ( '# txtSearchProdAssign') e gatilho de documento $ (document) .keypress .......
dave4jr
Parece questionável do ponto de vista da acessibilidade. Definitivamente, isso funcionará em todos os tipos de dispositivos com métodos diferentes de "seleção"?
21919 Jonny
26

Tente isto

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

Espero que ajude você

Neeraj Dubey
fonte
4
Você quis dizer if((event.keyCode || event.which) == 13)? Sim, é totalmente compatível com vários navegadores, que suporta a Tabchave no FF.
Hashem Qolami
Segundo a API , event.keyCodeé redundante, basta usar event.which.
konyak
12 
$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Também acabei de encontrar Enviando um formulário no 'Enter' que abrange a maioria dos problemas de forma abrangente.

geekchic
fonte
8

Você estava quase lá. Aqui está o que você pode tentar.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

Eu usei trigger()para executar clique e vinculá-lo no keyupevento insted keydownporque clickevento compreende dois eventos, na verdade, ou seja, mousedownentão mouseup. Então, para se parecer com as coisas da mesma maneira possível com keydowne keyup.

Aqui está uma demonstração

Rohit416
fonte
4

Outra adição a fazer:

Se você estiver adicionando dinamicamente uma entrada, por exemplo append(), usando , você deve usar a on()função jQuery .

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

ATUALIZAR:

Uma maneira ainda mais eficiente de fazer isso seria usar uma instrução switch. Você também pode achar mais limpo.

Marcação:

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});
Daniel Dewhurst
fonte
1
O IMO usando uma instrução switch para uma única condição é um exagero.
nyuszika7h
É mais eficiente do que uma declaração if, no entanto.
Daniel Dewhurst
2
Eu não acredito em você. Você pode citar uma fonte?
Rolf #
3

Você está tentando imitar um clique em um botão quando a tecla Enter é pressionada? Nesse caso, você pode precisar usar a triggersintaxe.

Tente mudar

$('input[name = butAssignProd]').click();

para

$('input[name = butAssignProd]').trigger("click");

Se esse não for o problema, tente dar uma segunda olhada na sintaxe de captura de chave, observando as soluções nesta publicação: jQuery Event Keypress: Qual tecla foi pressionada?

Shaun
fonte
De api.jquery.com/click - Esse método é um atalho para .on ("click", manipulador) nas duas primeiras variações e .trigger ("click") na terceira. então isso faria exatamente o mesmo.
Capsule
1

Tente isto

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>
Vishnu Prasad
fonte
1

Você pode usar este código

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});
sandeep kumar
fonte
1

Basta incluir a função preventDefault () no código,

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});
Arron
fonte
0

Jquery: Evento de clique no botão de disparo Usando o botão Enter Pressione tente isto ::

tabindex = "0" onkeypress = "retornar EnterEvent (evento)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->
JIYAUL MUSTAPHA
fonte
0 

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });
Expandir snippet

Supriya
fonte
-4

Este parece ser o comportamento padrão agora, por isso basta:

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

Você pode experimentá-lo neste JSFiddle

Testado em: Chrome 56.0 e Firefox (Dev Edition) 54.0a2, ambos com jQuery 2.2.xe 3.x

xDaizu
fonte
2
Isso não parece captar uma imprensa de 'retorno'.
klokop
@klokop Você está errado, isso pega um 'retorno' ou 'enter'. Acabei de experimentar com o jQuery 3 no FF 63, Chrome 69, Safari 10.0.1 e Opera 55, tanto no link quanto em um site separado que criei para testar isso sozinho. Isso é um +1 de mim.
hyperum
você está usando um botão, enter acionará botões e tags <a>, mas em um intervalo, digamos, ou como o OP possui um campo de entrada regular, esse não é o caso.
Nickfmc 03/11/19