Jquery: cómo activar un evento de clic al presionar la tecla enter

165

Necesito ejecutar un evento de clic de botón al presionar la tecla Intro.

Como es en este momento, el evento no se está disparando.

Por favor, ayúdame con la sintaxis si es posible.

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

este es mi intento de disparar evento de clic al entrar.

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

jquery key-events Arianule
fuente

Es posible que deba incluir un retorno falso o une.preventDefault();

geekchic

44

Como nota al margen: e.keyCodeno es completamente cruzado navegador. utilizar e.whichen su lugar.

Hashem Qolami

44

En este caso, DEBE usar en keyuplugar de keypresso keydown. keypress/ keydowneventos se disparan continuamente mientras se presiona la tecla: jsbin.com/uzoxuk/1/edit

Hashem Qolami

307

prueba esto ...

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

Mostrar fragmento 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 fragmento

Encuentre Demo en jsbin.com

Vijay
fuente

3

En caso de que las personas quieran reconocer la pulsación de tecla "enter" desde cualquier lugar, puede reemplazar $ ('# txtSearchProdAssign') y activar el documento $ (document) .keypress .......

dave4jr

Parece cuestionable desde una perspectiva de accesibilidad. ¿Esto definitivamente funcionará en todo tipo de dispositivos con diferentes métodos de "selección"?

Jonny

26

Prueba esto

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

Espero que te ayude

Neeraj Dubey
fuente

44

Quiso decir if((event.keyCode || event.which) == 13)? Sí, es un navegador completamente cruzado que admite la Tabclave en FF.

Hashem Qolami

Según la API , event.keyCodees redundante, solo utilícelo event.which.

konyak

12

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

También acabo de encontrar el envío de un formulario en 'Enter' que cubre la mayoría de los problemas de manera integral.

friki elegante
fuente

8

Ya casi estabas allí. Esto es lo que puedes probar.

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

Solía trigger()ejecutar hacer clic y vincularlo en el keyupevento indicado keydownporque el clickevento se compone de dos eventos en realidad, es decir, mousedownentonces mouseup. Entonces, para parecerse a las cosas lo más posible con keydowny keyup.

Aquí hay una demostración

Rohit416
fuente

4

Otra adición para hacer:

Si agrega dinámicamente una entrada, por ejemplo append(), usando , debe usar la on()función jQuery .

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

ACTUALIZAR:

Una forma aún más eficiente de hacerlo sería utilizar una declaración de cambio. También puede encontrarlo más limpio.

Margen:

<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
fuente

1

La OMI que usa una declaración de cambio para una sola condición es exagerada.

nyuszika7h

Sin embargo, es más eficiente que una declaración if.

Daniel Dewhurst

2

No te creo ¿Puedes citar una fuente?

Rolf

3

¿Intenta imitar un clic en un botón cuando se presiona la tecla Intro? Si es así, es posible que deba usar la triggersintaxis.

Intenta cambiar

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

a

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

Si este no es el problema, intente echar un segundo vistazo a la sintaxis de captura de clave al ver las soluciones en esta publicación: jQuery Event Keypress: ¿Qué tecla se presionó?

Shaun
fuente

Desde api.jquery.com/click : este método es un acceso directo para .on ("clic", controlador) en las dos primeras variaciones y .trigger ("clic") en la tercera. entonces eso haría exactamente lo mismo.

Cápsula

1

Prueba esto

<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
fuente

1

Puedes 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
fuente

1

Solo incluya la función preventDefault () en el código,

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

Arron
fuente

0

Jquery: evento de clic del botón de disparo Usando el botón enter Presione intente esto ::

tabindex = "0" onkeypress = "return EnterEvent (event)"

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

JIYAUL MUSTAPHA
fuente

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 fragmento

Supriya
fuente

-4

Este parece ser el comportamiento predeterminado ahora, por lo que es suficiente para hacer:

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

Puedes probarlo en este JSFiddle

Probado en: Chrome 56.0 y Firefox (Dev Edition) 54.0a2, ambos con jQuery 2.2.xy 3.x

xDaizu
fuente

2

Esto no parece captar una prensa de 'retorno' en absoluto.

klokop

@klokop Estás equivocado, esto atrapa un 'retorno' o 'enter'. Lo probé yo mismo con jQuery 3 en FF 63, Chrome 69, Safari 10.0.1 y Opera 55, tanto en su enlace como en un sitio separado que creé para probar esto yo mismo. Eso es un +1 de mi parte.

hyperum

está utilizando un botón, enter activará botones y etiquetas <a> pero en un lapso digamos o como OP tiene un campo de entrada regular, este no es el caso.

Nickfmc

Jquery: cómo activar un evento de clic al presionar la tecla enter

Respuestas: