it-swarm.com.de

Wie erkennt man das Drücken der Eingabetaste auf der Tastatur mit jQuery?

Ich möchte feststellen, ob der Benutzer gedrückt hat Enter mit jQuery.

Wie ist das möglich? Benötigt es ein Plugin?

EDIT: Es sieht so aus, als müsste ich die keypress() -Methode verwenden.

Ich wollte wissen, ob jemand weiß, ob es bei diesem Befehl Browserprobleme gibt - wie gibt es Probleme mit der Browserkompatibilität, die ich kennen sollte?

674
chris

Der springende Punkt bei jQuery ist, dass Sie sich keine Gedanken über Browserunterschiede machen müssen. Ich bin mir ziemlich sicher, dass Sie sicher mitgehen können enter mit 13 in allen Browsern. In diesem Sinne können Sie Folgendes tun:

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

Ich habe ein kleines Plugin geschrieben, um es einfacher zu machen, das Ereignis "bei der Enter-Taste gedrückt" zu binden:

$.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);
            }
        })
    })
}

Verwendungszweck:

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

Ich konnte den Code von @Paolo Bergantino nicht zum Laufen bringen, aber als ich ihn in $(document) und e.which anstelle von e.keyCode änderte, stellte ich fest, dass er fehlerfrei funktioniert.

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

Link zu Beispiel in JS Bin

60
Ian Roke

Ich fand, dass dies mehr Browser-kompatibel ist:

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

Sie können dies mit dem Ereignis-Handle jquery 'keydown' tun

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

Ich habe einige Zeit damit verbracht, diese Lösung zu finden. Ich hoffe, es hilft jemandem.

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

});
8

Es gibt eine keypress () event-Methode. Die ASCII-Nummer der Eingabetaste ist 13 und hängt nicht davon ab, welcher Browser verwendet wird.

7
Richard Simões

Eine geringfügige Erweiterung der Antwort von Andrea oben macht die Hilfsmethode nützlicher, wenn Sie auch geänderte Eingabepressen erfassen möchten (z. B. Strg-Eingabe oder Umschalt-Eingabe). Zum Beispiel erlaubt diese Variante das Binden wie:

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

zum Senden eines Formulars, wenn der Benutzer die Strg-Eingabetaste drückt, wobei der Textbereich dieses Formulars angezeigt wird.

$.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);
            }
        })
    })
}

(Siehe auch Ctrl + Eingabe von jQuery in TEXTAREA )

6
joeln

Verwenden Sie event.key und modernes JS!

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

oder ohne jQuery:

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

Mozilla Docs

Unterstützte Browser

5
Gibolt

Versuchen Sie dies, um die gedrückte Eingabetaste zu erkennen.

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

Siehe Demo @ Eingabetaste Tastendruck auf der Tastatur erkennen

4
jonathan klevin

In einigen Fällen müssen Sie möglicherweise die unterdrücken ENTER Schlüssel für einen bestimmten Bereich einer Seite, aber nicht für andere Bereiche einer Seite, wie die Seite darunter, die einen Header <div> mit einem SUCHE Feld.

Ich habe ein wenig gebraucht, um herauszufinden, wie das geht, und ich veröffentliche dieses einfache, aber vollständige Beispiel hier oben für die Community.

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

Link zum JSFiddle-Spielplatz : Die Schaltfläche [Submit] bewirkt nichts anderes als das Drücken von ENTER Über eines der Textfeld-Steuerelemente wird das Formular nicht gesendet.

4
jp2code
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
0
AzizAhmad
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
0

Verwenden der Tastendruckmethode, um das Drücken der Eingabetaste auf der Tastatur mithilfe von jQuery zu erkennen?

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

        $('#someTextBox').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert('You pressed a "enter" key in textbox'); 
            }
            event.stopPropagation();
        });
    
<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>Write something here & press enter</h1>
    <label>TextBox Area: </label>
    <input id="someTextBox" type="text" size="100" />
 
</body>
</html>
0
Devendra Dode

Der einfachste Weg, um festzustellen, ob der Benutzer die Eingabetaste gedrückt hat, besteht darin, die Tastennummer zu verwenden

$("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);
});

durch Drücken der Eingabetaste erhalten Sie das Ergebnis 13. Mit dem Schlüsselwert können Sie eine Funktion aufrufen oder tun, was Sie möchten 

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

wenn Sie nach Drücken der Eingabetaste eine Taste als Ziel auswählen möchten, können Sie den Code verwenden 

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

Ich hoffe es hilft 

0
user2216399

Ich denke, die einfachste Methode wäre die Verwendung von Vanilla javascript:

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