378 Stimmen

Formularübermittlung beim Drücken der Eingabetaste verhindern

を持っています。 form mit zwei Textfeldern, einem Wählen Sie Dropdown und eine Optionsschaltfläche . Wenn die enter Taste gedrückt wird, möchte ich meine JavaScript-Funktion aufrufen, aber wenn ich sie drücke, wird die form vorgelegt wird.

Wie kann ich die form von der Übermittlung, wenn die <strong>enter</strong> Taste gedrückt wird?

18voto

rpkelly Punkte 1996

Überschreiben Sie die onsubmit Aktion des Formulars ein Aufruf Ihrer Funktion sein und fügen Sie return false dahinter ein, d.h.:

<form onsubmit="javascript:myfunc();return false;" >

17voto

caffeinescript Punkte 1155

Eine react js Lösung

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }

 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

10voto

Matt Doran Punkte 1970

Die beste Lösung, um so viele Browser wie möglich abzudecken und zukunftssicher zu sein, wäre also vielleicht

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

6voto

DINA TAKLIT Punkte 4596

Hier sehen Sie, wie Sie dies mit JavaScript erreichen können:

//in your **popup.js** file just use this function 

    var input = document.getElementById("textSearch");
    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            alert("yes it works,I'm happy ");
        }
    });

<!--Let's say this is your html file-->
 <!DOCTYPE html>
    <html>
      <body style="width: 500px">
        <input placeholder="Enter the text and press enter" type="text" id="textSearch"/> 
          <script type="text/javascript" src="public/js/popup.js"></script>
      </body>
    </html>

5voto

Hitesh Sahu Punkte 37527

Der folgende Code fügt einen Listener für ENTER Taste auf der gesamten Seite.

Dies kann sehr nützlich sein bei Bildschirmen mit einer einzigen Aktionsschaltfläche, z. B. Anmelden, Registrieren, Absenden usw.

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

Getestet auf allen Browsern.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X