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

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

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

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

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

Expandir snippet

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