Geben Sie das Presseereignis in JavaScript ein

Ich habe eine form mit zwei Textfeldern, eins wählen Sie drop-down-und einem radio-button. Wenn die enter - Taste gedrückt wird, will ich rufen eine javascript-Funktion (User defined), aber wenn ich drücken Sie ihn, das Formular abgeschickt wird.

Wie kann ich verhindern, dass die form wird eingereicht, wenn das geben Sie - Taste gedrückt wird?

InformationsquelleAutor der Frage Shyju | 2009-05-25

347
```
if(characterCode == 13)
{
    return false; //returning false will prevent the event from bubbling up.
}
else
{
    return true;
}
```
Ok, also stellen Sie sich vor, Sie haben die folgende textbox in einem Formular:
```
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
```
Damit laufen einige "user defined" - Skript aus diesem Textfeld, wenn Sie die enter-Taste gedrückt wird, und nicht haben Sie das Formular Absenden, haben wir hier einige Probe code. Bitte beachten Sie, dass diese Funktion keinen Fehler zu überprüfen und die meisten wahrscheinlich nur im IE funktioniert. Dieses Recht müssen Sie eine stabilere Lösung, aber Sie erhalten die Allgemeine Idee.
```
function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}
```
Rücksendung wird der Wert der Funktion wird der alert-der event-handler nicht zur Blase die Veranstaltung weiter, und wird verhindern, dass das keypress-Ereignis bearbeitet weiter.

HINWEIS:

Es ist darauf hingewiesen worden, dass keyCode ist jetzt veraltet. Die nächste beste alternative which hat auch veraltet.

Leider ist der bevorzugte standard keydie ist weit verbreitet, unterstützt durch moderne Browser hat einige verdächtiges Verhalten im IE und Edge. Alles, was älter als IE11 bräuchte noch ein polyfill.

Außerdem, während die deprecated-Warnung ist ziemlich ominös über keyCode und which entfernen diese stellen einen massiven Bruch ändern, untold-Nummern von legacy-websites. Aus diesem Grund es ist unwahrscheinlich, dass Sie gehen, überall jederzeit schnell.

InformationsquelleAutor der Antwort Josh

103

Verwenden beide event.which und event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};

InformationsquelleAutor der Antwort Agiagnoc

Wenn Sie mit jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

InformationsquelleAutor der Antwort cowboy

Veranstaltung.key === "Enter"

Mehr die jüngsten und viel sauberer: verwenden Sie event.key. Nicht mehr beliebig viele codes!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        //Do more work
    }
});

Mozilla Docs

Unterstützte Browser

InformationsquelleAutor der Antwort Gibolt

17

Überschreiben der onsubmit Wirkung der form zu sein, rufen Sie Ihre Funktion, und fügen Sie false zurückgeben, nach dem es, sprich:
```
<form onsubmit="javascript:myfunc();return false;" >
```
InformationsquelleAutor der Antwort rpkelly

Erkennen Enter-Taste gedrückt gesamte Dokument:

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

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

InformationsquelleAutor der Antwort umer

Einen reagieren 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>

InformationsquelleAutor der Antwort caffeinescript

Folgenden code hinzufügen listener für ENTER Taste auf der gesamten Seite.

Dies kann sehr nützlich sein, Bildschirme mit single-Action-button z.B. Login, Registrierung, Abgabe etc.

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

InformationsquelleAutor der Antwort Hitesh Sahu

Eine jQuery Lösung.

Ich kam hierher auf der Suche nach einem Weg, um die Verzögerung der übermittlung der form erst nach dem blur-event auf den text Eingang abgefeuert wurden.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  //No need to do anything if it's not the enter key
  //Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  //Prevent form submit
  e.preventDefault();

  //Trigger the blur event.
  this.blur();

  //Submit the form.
  $(e.target).closest('form').submit();
});

Wäre schön wenn man eine allgemeinere version, feuerte alle delayed events anstatt nur das Formular Absenden.

InformationsquelleAutor der Antwort chim

Ist ein viel einfacher und effektiver Weg, aus meiner Sicht sein sollte :

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

InformationsquelleAutor der Antwort Thanos

Typoskript mit, und vermeiden Sie Vielfache Anrufe auf die Funktion

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    //more stuff
}

InformationsquelleAutor der Antwort Wagner Pereira

<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

InformationsquelleAutor der Antwort Mizanur Rahaman

wenn Sie wollen, es zu tun mit purly java-script hier ein Beispiel, dass die Arbeit perfekt

Sagen wir: dies ist die html-Datei

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

in Ihrem popup.js Datei nur verwenden Sie diese Funktion,

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

InformationsquelleAutor der Antwort ZINA TAKLIT

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

HINWEIS:

Veranstaltung.key === "Enter"