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?
Antworten:
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.
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.
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.
Verwenden Sie beide event.whichund event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichandere keyCode. Es ist empfehlenswert, beide einzubeziehen.
keydownEreignis auch anstelle von keyuporkeypress
Wenn Sie jQuery verwenden:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaultscheint aber das Senden des Formulars nicht zu stoppen, zumindest nicht in Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'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.
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
}
});keyCodeist veraltet. Dies ist besser lesbar und wartbar als eine magische Ganzzahl in Ihrem Code
Erkennungstaste auf dem gesamten Dokument gedrückt drücken:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Ü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;" >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>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")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 ");
}
});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.
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.
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
}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"><form id="form1" runat="server" onkeypress="return event.keyCode != 13;">Fügen Sie diesen Code in Ihre HTML-Seite ein ... er wird deaktiviert ... Eingabetaste ..
<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>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');
}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>