wake-up-neo.com

Geben Sie das Tastendruckereignis in JavaScript ein

Ich habe eine form mit zwei Textfeldern, einem auswählen Dropdown und einem Optionsfeld. Wenn der enter Wenn die Taste gedrückt wird, möchte ich eine Javascript-Funktion aufrufen (benutzerdefiniert), aber wenn ich sie drücke, wird das Formular gesendet.

Wie verhindere ich, dass der form gesendet wird, wenn der enter Taste gedrückt?

formsjavascript-eventskeypressenter
272
Shyju
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 aus diesem Textfeld auszuführen, wenn die Eingabetaste gedrückt wird, und das Formular nicht senden zu müssen, 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 werden eine allgemeine Vorstellung davon haben.

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 gewarnt, das Ereignis nicht weiter zu sprudeln, und es wird verhindert, dass das Tastendruckereignis weiter verarbeitet wird.

HINWEIS:

Es wurde darauf hingewiesen, dass keyCodejetzt veraltet ist. Die nächstbeste Alternative which ist ebenfalls veraltet .

Leider hat der bevorzugte Standard key, der von modernen Browsern weitgehend unterstützt wird, einige zweifelhaftes Verhalten in IE und Edge . Alles, was älter als IE11 ist, würde noch ein Polyfill benötigen.

Während die veraltete Warnung in Bezug auf keyCode und which ziemlich bedrohlich ist, würde das Entfernen dieser Warnungen eine massive Veränderung für eine unermessliche Anzahl von Legacy-Websites bedeuten. Aus diesem Grund ist es unwahrscheinlich, dass sie bald irgendwohin gehen.

400
Josh

Verwenden Sie sowohl event.which als auch event.keyCode:

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

Wenn Sie jQuery verwenden:

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

event.key === "Enter"

Neuere und viel sauberere: Verwenden Sie event.key. Keine beliebigen 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

34
Gibolt

Eingabetaste für das gesamte Dokument erkennen:

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

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

18
umer

Überschreiben Sie die onsubmit-Aktion des Formulars, um Ihre Funktion aufzurufen, und fügen Sie danach false zurück, dh:

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

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>
13
caffeinescript

Mit dem folgenden Code wird der Listener für den ENTER-Schlüssel auf der gesamten Seite hinzugefügt.

Dies kann in Bildschirmen mit einer einzigen Aktionstaste 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. 

5
Hitesh Sahu

Eine jQuery-Lösung.

Ich kam hierher, um nach einer Möglichkeit zu suchen, die Formularübermittlung zu verzögern, bis das Unschärfeereignis für die 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 ausgelöst hat und nicht nur das Formular absendet.

3
chim

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
}
2
Wagner Pereira

Ein viel einfacher und effektiverer Weg aus meiner Sicht 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;
        }
}
2
Thanos

Also vielleicht die beste Lösung um möglichst viele Browser abzudecken und zukunftssicher zu sein 

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

1
Matt Doran

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

1
xgqfrms

wenn Sie es mit reinem Java-Skript tun wollen, ist dies ein Beispiel, das perfekt funktioniert 

Nehmen wir an, 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 popup.js -Datei 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 ");
    }
});
1
DINA TAKLIT

Ein bisschen einfach

Senden Sie das Formular nicht per Tastendruck "Enter":

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

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

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
0
rbz
<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>
0
Mizanur Rahaman

Diese Funktion preventKey() funktioniert unabhängig von den veralteten Browserfunktionen.

Es muss nur eine der drei Eigenschaften which (veraltet), keyCode (veraltet) oder key (Probleme im IE) vorhanden sein.

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

JS

function preventKey(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 (preventKey(event, 'Enter', 13)) {
    event.preventDefault();
  }
});

HTML

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

Browsertest

Wenn Sie verschiedene Browser manuell testen möchten, kommentieren oder kommentieren Sie eine der drei folgenden event.something-Zeilen aus:

var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'

if (preventKey(event, 'Enter', 13)) {
  console.log('enter was pressed');
}
0
Tobi Obeck