Jquery: come attivare l'evento click premendo il tasto invio

165

Devo eseguire un evento clic sul pulsante premendo il tasto invio.

Come è al momento, l'evento non si sta attivando.

Aiutatemi con la sintassi, se possibile.

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

questo è il mio tentativo di attivare l'evento click su invio.

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

jquery key-events

— Arianule
fonte

Potrebbe essere necessario includere un ritorno falso o une.preventDefault();

— geekchic il

4

Come nota a margine: e.keyCodenon è completamente cross-browser. usa e.whichinvece.

— Hashem Qolami,

4

In questo caso, DOVREBBE utilizzare al keyupposto di keypresso keydown. keypress/ keydowneventi si innescano continuamente mentre si preme il tasto: jsbin.com/uzoxuk/1/edit

— Hashem Qolami

307

prova questo ....

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

Mostra snippet di codice

$(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>

Espandi frammento

Trova la demo in jsbin.com

— Vijay
fonte

3

Nel caso in cui le persone desiderino riconoscere il tasto "invio" da qualsiasi luogo, è possibile sostituire $ ('# txtSearchProdAssign') e attivare il documento $ (documento) .keypress .......

— dave4jr

Sembra discutibile dal punto di vista dell'accessibilità. Funzionerà sicuramente su tutti i tipi di dispositivi con metodi di "selezione" diversi?

— Jonny,

27

Prova questo

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

Spero che ti aiuti

— Neeraj Dubey
fonte

4

Volevi dire if((event.keyCode || event.which) == 13)? sì, è completamente cross browser che supporta la Tabchiave in FF.

— Hashem Qolami,

Secondo l' API , event.keyCodeè ridondante, basta usare event.which.

— Konyak,

12

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

Ho anche appena trovato l' invio di un modulo su 'Invio' che copre la maggior parte dei problemi in modo completo.

— geekchic
fonte

8

Eri quasi lì. Ecco cosa puoi provare però.

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

Ho usato trigger()per fare clic e associarlo keyupall'evento istinto keydownperché l' clickevento comprende due eventi effettivamente cioè mousedownallora mouseup. Quindi, per assomigliare alle cose il più possibile con keydownekeyup .

Ecco una demo

— Rohit416
fonte

4

Un'altra aggiunta da fare:

Se si aggiunge un input in modo dinamico, ad esempio utilizzando append(), è necessario utilizzare la on()funzione jQuery .

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

AGGIORNARE:

Un modo ancora più efficace per farlo sarebbe usare un'istruzione switch. Potresti trovarlo anche più pulito.

markup:

<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

L'IMO che utilizza un'istruzione switch per una singola condizione è eccessivo.

— nyuszika7h,

Tuttavia, è più efficiente di un'istruzione if.

— Daniel Dewhurst,

2

Non ti credo. Puoi citare una fonte?

— Rolf,

3

Stai cercando di imitare un clic su un pulsante quando viene premuto il tasto Invio? In tal caso, potrebbe essere necessario utilizzare la triggersintassi.

Prova a cambiare

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

per

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

Se questo non è il problema, prova a dare una seconda occhiata alla sintassi di acquisizione dei tasti esaminando le soluzioni in questo post: jQuery Event Keypress: quale tasto è stato premuto?

— Shaun
fonte

Da api.jquery.com/click : questo metodo è una scorciatoia per .on ("clic", gestore) nelle prime due varianti e .trigger ("clic") nella terza. quindi farebbe esattamente lo stesso.

— Capsule

1

Prova questo

<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

Puoi usare questo codice

$(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

Includi solo la funzione preventDefault () nel codice,

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

— Arron
fonte

0

Jquery: Evento clic sul pulsante di fuoco Utilizzo del pulsante Invio Premere prova questo ::

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
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';
            }
        });

Espandi frammento

— Supriya
fonte

-4

Questo sembra essere un comportamento predefinito ora, quindi è sufficiente fare:

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

Puoi provarlo in questo JSFiddle

Testato su: Chrome 56.0 e Firefox (Dev Edition) 54.0a2, entrambi con jQuery 2.2.xe 3.x

— xDaizu
fonte

2

Questo non sembra affatto catturare una stampa di 'ritorno'.

— klokop,

@klokop Ti sbagli, questo cattura un 'return' o 'enter'. L'ho provato da solo con jQuery 3 su FF 63, Chrome 69, Safari 10.0.1 e Opera 55, sia sul loro link che su un sito separato che ho creato per testarlo da solo. Questo è un +1 da parte mia.

— hyperum,

stai usando un pulsante, invio attiverà pulsanti e <a> tag ma su un arco di tempo dire o poiché OP ha un campo di input normale, non è così.

— Nickfmc,