Geben Sie das Tastendruckereignis in JavaScript ein

330

Ich habe ein formmit zwei Textfeldern, einem Auswahl- Dropdown und einem Optionsfeld . Wenn die enterTaste gedrückt wird, möchte ich eine Javascript-Funktion (benutzerdefiniert) aufrufen, aber wenn ich sie drücke, wird das Formular gesendet.

Wie verhindere ich, dass das formgesendet wird, wenn die enterTaste gedrückt wird?

javascript forms keypress dom-events enter Shyju
quelle

Antworten:

444 
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

Ok, stellen Sie sich vor, Sie haben das folgende Textfeld in einem Formular:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

Um ein "benutzerdefiniertes" Skript in diesem Textfeld auszuführen, wenn die Eingabetaste gedrückt wird und das Formular nicht gesendet wird, finden Sie hier einen Beispielcode . Bitte beachten Sie, dass diese Funktion keine Fehlerprüfung durchführt und höchstwahrscheinlich nur im IE funktioniert. Um dies richtig zu machen, benötigen Sie eine robustere Lösung, aber Sie erhalten eine allgemeine Vorstellung.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

Wenn Sie den Wert der Funktion zurückgeben, wird der Ereignishandler darauf hingewiesen, das Ereignis nicht weiter zu sprudeln, und es wird verhindert, dass das Tastendruckereignis weiter behandelt wird.

HINWEIS:

Es ist schon darauf hingewiesen , dass keyCodeist jetzt veraltet . Die nächstbeste Alternative whichwurde ebenfalls abgelehnt .

Leider keyweist der bevorzugte Standard , der von modernen Browsern weitgehend unterstützt wird, in IE und Edge ein zweifelhaftes Verhalten auf . Alles , was älter als IE11 würde immer noch einen Bedarf polyfill .

Während die veraltete Warnung in Bezug auf keyCodeund ziemlich bedrohlich whichist, würde das Entfernen dieser Warnungen eine massive Veränderung für unzählige ältere Websites bedeuten. Aus diesem Grund ist es unwahrscheinlich, dass sie bald irgendwohin gehen.

Josh
quelle
4
Was genau meinst du mit benutzerdefiniert? Der Benutzer gibt ein Skript in ein Textfeld ein und führt es mit Eval () aus.
Josh
1
Ist dies eine Situation, in der PreventDefualt verwendet werden kann?
12
@ Stuart.Sklinar - Wenn der Benutzer bei der Eingabe eine Bewertung durchführt, die er in den Browser eingegeben hat, hat er nicht mehr Kontrolle, als wenn er die Befehlskonsole in Chrome / FF / IE geöffnet und das Skript selbst eingegeben hat. Die einzige Person, die sie verletzen können, sind sie selbst ... es sei denn, Sie erzwingen natürlich keine Sicherheit auf dem Server. Das ist insgesamt ein anderes Problem.
Josh
1
@SteelBrain - Auch hier evalist es nicht anders , jemandem ein Textfeld zu geben, das er eingeben kann, und dann den Inhalt durch Drücken einer Schaltfläche zu ändern, als wenn er die Entwicklertools geöffnet und es getan hätte. Wenn dies etwas wäre, das in der Datenbank gespeichert würde und von einem anderen Benutzer geöffnet werden könnte, wäre es eine große Sache, aber das ist ein Problem, das völlig unabhängig von diesem kleinen Ausschnitt ist.
Josh
5
keyCodeist jetzt veraltet
John Slegers
137

Verwenden Sie beide event.whichund event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
quelle
11
Warum sowohl event.which als auch event.keyCode?
Alex Spurling
35
Einige Browser unterstützen whichandere keyCode. Es ist empfehlenswert, beide einzubeziehen.
user568109
Verwenden Sie das keydownEreignis auch anstelle von keyuporkeypress
manish_s
@Agiagnoc aber an welches Ereignis sollte dies angehängt werden?
Don Cheadle
2
@manish, Tastendruck gibt Ihnen mehr Informationen zum Spielen als Keydown / Up. stackoverflow.com/a/9905293/322537
Hermann Ingjaldsson
78

Wenn Sie jQuery verwenden:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
Cowboy
quelle
1
Ich konnte das nicht zum Laufen bringen. Der Handler wird ausgelöst, preventDefaultscheint aber das Senden des Formulars nicht zu stoppen, zumindest nicht in Chrome.
Drew Noakes
19
Sie müssen Keydown-Ereignis anstelle von Keyup verwenden:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov
2
keyup wird NACH der Übermittlung ausgelöst und kann daher nicht abgebrochen werden.
Pierre-Olivier Vares
Sowohl Keyup als auch Keypress haben bei mir funktioniert. Ich ging mit Tastendruck. Vielen Dank!
Markiyanm
'keydown'ist richtig, wie die anderen Kommentatoren sagen. Da es nicht geändert wurde, werde ich die Antwort aktualisieren. Ich benutzte diese Antwort und blieb eine Weile stecken, bis ich zurückkam und mir die Kommentare ansah.
Matt K
71

event.key === "Enter"

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr!

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

Gibolt
quelle
War auf der Suche danach. sah die Schlüsseleigenschaft im Konsolenprotokoll von $ event. dachte, es könnte zuverlässiger sein
Tatsu
Ist das nicht nur ein Makro oder ein Alias? Gibt es einen Leistungsvorteil bei Verwendung dieses Codes?
Uhr
1
keyCodeist veraltet. Dies ist besser lesbar und wartbar als eine magische Ganzzahl in Ihrem Code
Gibolt
17

Überschreiben Sie die onsubmitAktion des Formulars, um Ihre Funktion aufzurufen, und fügen Sie danach return false hinzu, dh:

<form onsubmit="javascript:myfunc();return false;" >
rpkelly
quelle
Ich kann onsubmit nicht überschreiben, da ich ein anderes Formular auf dieser Seite habe
Shyju
5
Ja, du kannst. Javascript ist eine prototypbasierte Sprache. document.forms ["form_name"]. onsubmit = fucntion () {}
the_drow
Ich habe eine andere
Löschprozedur
17

Eine Reaktionslösung

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


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
Koffein-Skript
quelle
9

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

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
Matt Doran
quelle
6

Wenn Sie dies mit einem reinen Java-Skript tun möchten, finden Sie hier ein Beispiel, das perfekt funktioniert

Angenommen, dies ist Ihre 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>

Verwenden Sie in Ihrer Datei popup.js einfach 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 ");
    }
});
DINA TAKLIT
quelle
5

Der folgende Code fügt den Listener für den ENTERSchlüssel auf der gesamten Seite hinzu.

Dies kann in Bildschirmen mit einer einzigen Aktionstaste sehr nützlich sein, z. B. Anmelden, Registrieren, Senden 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>

In allen Browsern getestet.

Hitesh Sahu
quelle
3

Eine jQuery-Lösung.

Ich bin hierher gekommen, um nach einer Möglichkeit zu suchen, die Formularübermittlung zu verzögern, bis das Unschärfeereignis bei der Texteingabe ausgelöst wurde.

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

Es wäre schön, eine allgemeinere Version zu erhalten, die alle verzögerten Ereignisse auslöst und nicht nur das Formular.

chim
quelle
3

Ein aus meiner Sicht viel einfacher und effektiver Weg sollte sein: 

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

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

Verwenden Sie TypeScript und vermeiden Sie mehrfache Aufrufe der Funktion

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

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
Wagner Pereira
quelle
Diese Frage ist mehr als acht Jahre alt. Typoskript gab es damals nicht. Sind Sie sicher, dass Sie keine andere Frage beantworten?
Nico Haase
2

Ein bisschen einfach

Senden Sie das Formular nicht per Tastendruck "Enter":

<form id="form_cdb" onsubmit="return false">

Führen Sie die Funktion bei Tastendruck "Enter" aus:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
rbz
quelle
1

native js (API holen)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">
Erweitern Sie das Snippet

xgqfrms
quelle
Warum wurde client_id usw. hier aufgenommen? Ist der Code echt?
Eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Fügen Sie diesen Code in Ihre HTML-Seite ein ... er wird deaktiviert ... Eingabetaste ..

Akhilesh Singh
quelle
sehr cool, danke
Chris Allinson
0 
<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>
Mizanur Rahaman
quelle
0

Browserübergreifende Lösung

Einige ältere Browser haben Keydown-Ereignisse auf nicht standardmäßige Weise implementiert.

KeyBoardEvent.key ist die Art und Weise, wie es in modernen Browsern implementiert werden soll.

which und keyCodesind heutzutage veraltet, aber es tut nicht weh, nach diesen Ereignissen zu suchen, damit der Code für Benutzer funktioniert, die noch ältere Browser wie IE verwenden.

Die isKeyPressedFunktion prüft, ob die gedrückte Taste eingegeben wurde, und verhindert das event.preventDefault()Senden des Formulars.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Minimales Arbeitsbeispiel

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

Tobi Obeck
quelle