Come rilevare premendo Invio sulla tastiera usando jQuery?


731

Vorrei rilevare se l'utente ha premuto Enterusando jQuery.

Com'è possibile? Richiede un plugin?

EDIT: sembra che devo usare il keypress()metodo.

Volevo sapere se qualcuno sa se ci sono problemi del browser con quel comando - come ci sono problemi di compatibilità del browser che dovrei conoscere?



5
Una delle cose migliori nei framework Javascript è che dovrebbero essere compatibili per impostazione predefinita tra browser diversi. Gestiscono i controlli di compatibilità del browser in modo che l'utente non debba. Non ho letto il codice sorgente di JQuery ma dubito che la funzionalità keypress sia diversa in questo senso.
miek,

2
l'unico problema di compatibilità del browser è che è necessario utilizzare e.which anziché e.keyCode per rilevare il codice ascii.
Daniel,

Risposte:


1330

Il punto centrale di jQuery è che non devi preoccuparti delle differenze del browser. Sono abbastanza sicuro che puoi tranquillamente enteravere 13 anni in tutti i browser. Quindi, con questo in mente, puoi farlo:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

7
Mi sto collegando a questo perché ho letto questo e ho lasciato grattarmi la testa sul perché Keypress non ha funzionato con IE. (non si legherà a $(window)sotto IE) quirksmode.org/dom/events/keys.html
Incognito

17
e.keyCode non è cross browser al 100%. usa e.che invece come mostrato sotto
Daniel

15
Dalla documentazione jQuery "La proprietà event.which normalizza event.keyCode ed event.charCode. Si consiglia di guardare event.which per l'immissione dei tasti della tastiera."
Riccardo Galli,

20
$ (document) .on ('keypress', function (e) {
user956584

5
Ricevo più esecuzioni della funzione data a causa della propagazione degli eventi (ovvero, l'avviso viene lanciato due volte). Per fermarlo, aggiungi un e.stopPropagation () alla fine della funzione
dpb

129

Ho scritto un piccolo plug-in per rendere più semplice associare un evento "premendo il tasto Invio":

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Uso:

$("#input").enterKey(function () {
    alert('Enter!');
})

Questo non funziona per me (sono sceso #inputin <input>campo)
Rápli András il

1
Che dire se l'elemento #input sarà dinamico?
Jigar7521,

@mplungjan non sono sicuro di cosa intendi per "delegare"
Andrea

$("#input").on("someevent","someselector",function () {})
mplungjan,

62

Non sono riuscito a far funzionare il codice pubblicato da @Paolo Bergantino, ma quando l'ho cambiato $(document)e e.whichinvece di e.keyCodeaverlo trovato funzionante senza errori.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Link all'esempio sul JS Bin


Per me e.che non funziona con IE. Funziona per gli altri?
Umesh Rajbhandari,

Quale versione di IE? Funziona bene per me su IE7.
Ian Roke,

Dalla documentazione jQuery "La proprietà event.which normalizza event.keyCode ed event.charCode. Si consiglia di guardare event.which per l'immissione dei tasti della tastiera."
Riccardo Galli,

52

Ho trovato questo più compatibile con più browser:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

1
Il tuo Ternary IF può essere abbreviato in: var keycode = event.keyCode || event.which;
pistola-pete

29

Puoi farlo usando l'handle dell'evento 'keydown' di jquery

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

11

Usa event.keye JS moderno!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

o senza jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Docs

Browser supportati


9

Ho passato del tempo a trovare questa soluzione, spero che aiuti qualcuno.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});


7

Un'estensione minore della risposta di Andrea sopra rende il metodo helper più utile quando potresti anche voler catturare presse di invio modificate (cioè ctrl-enter o shift-enter). Ad esempio, questa variante consente l'associazione come:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

per inviare un modulo quando l'utente preme ctrl-invio con focus sulla textarea di quel modulo.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(vedi anche Ctrl + Enter jQuery in TEXTAREA )


4

In alcuni casi, potrebbe essere necessario sopprimere la ENTERchiave per una determinata area di una pagina ma non per altre aree di una pagina, come la pagina seguente che contiene un'intestazione <div> con un campo RICERCA .

Mi ci è voluto un po 'per capire come fare e sto pubblicando questo esempio semplice ma completo qui per la comunità.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Collegamento a JSFiddle Playground : il [Submit]pulsante non fa nulla, ma premendo ENTERda uno dei controlli Casella di testo non verrà inviato il modulo.



2

Poiché l' keypressevento non è coperto da alcuna specifica ufficiale, il comportamento effettivo riscontrato durante l'utilizzo può variare a seconda del browser, della versione del browser e della piattaforma.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Spero sia utile!


Da notare, il motivo per cui keypressnon è più nelle specifiche (più) è che è stato deprecato ( MDN ).
YellowAfterlife,

quindi, ho modificato ... tnx <3
Zoe_NS il

0

Il modo più semplice per rilevare se l'utente ha premuto invio è utilizzare il numero chiave il numero immissione chiave è = 13 per verificare il valore della chiave nel dispositivo

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

premendo il tasto invio si otterrà il risultato come 13. usando il valore chiave puoi chiamare una funzione o fare quello che vuoi

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

se si desidera scegliere come target un pulsante dopo aver premuto il tasto Invio, è possibile utilizzare il codice

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Spero che sia d'aiuto


0

Penso che il metodo più semplice sarebbe usare il javacript alla vaniglia :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

0
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

3
Potresti aggiungere un po 'di commenti esplicativi per spiegare al richiedente come funziona il tuo codice - grazie.
SaschaM78,

0
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

Sembra un adattamento di altre risposte: potresti aggiungere qualche spiegazione per rendere le tue interessanti quanto le altre?
Nico Haase,

0

Ho usato $(document).on("keydown").

Su alcuni browser keyCodenon è supportato. Lo stesso vale whichse keyCodenon è supportato è necessario utilizzare whiche viceversa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.