Mam formdwa pola tekstowe, jednej wybranej rozwijanym i jednego przycisku radiowego . Po enternaciśnięciu klawisza chcę wywołać funkcję Javascript (zdefiniowaną przez użytkownika), ale po jej naciśnięciu formularz jest przesyłany.
Jak zapobiec formprzesyłaniu wiadomości po enternaciśnięciu klawisza?
Odpowiedzi:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}Ok, więc wyobraź sobie, że masz następujące pole tekstowe w formularzu:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Aby uruchomić skrypt „zdefiniowany przez użytkownika” z tego pola tekstowego po naciśnięciu klawisza Enter i nie wysyłać formularza, oto przykładowy kod. Pamiętaj, że ta funkcja nie sprawdza błędów i najprawdopodobniej będzie działać tylko w IE. Aby zrobić to dobrze, potrzebujesz bardziej niezawodnego rozwiązania, ale uzyskasz ogólny pomysł.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}zwrócenie wartości funkcji ostrzega moduł obsługi zdarzeń, aby nie powodował dalszego blokowania zdarzenia i uniemożliwi dalszą obsługę zdarzenia naciśnięcia klawisza.
Podkreślono, że obecniekeyCode jest przestarzałe . Następnego najlepszą alternatywą whichjest również przestarzała .
Niestety ulubiony standard key, który jest powszechnie obsługiwany przez nowoczesne przeglądarki, ma pewne podejrzane zachowanie w IE i Edge . Wszystko starsze niż IE11 nadal wymagałoby wypełniania .
Co więcej, choć przestarzałe ostrzeżenie jest dość złowieszcze, keyCodea whichusunięcie ich stanowiłoby ogromną przełomową zmianę w nieopowiedzianej liczbie starszych witryn. Z tego powodu jest mało prawdopodobne, że w najbliższym czasie pójdą gdziekolwiek.
evalzawartość przez naciśnięcie przycisku nie różni się od tego, czy otworzyli narzędzia programistyczne i zrobili to. Gdyby to było coś, co zapisywało się w bazie danych i mogłoby być otwierane przez KOLEJNEGO użytkownika, to byłaby to wielka sprawa, ale jest to problem całkowicie niezależny od tego małego fragmentu kodu.
Użyj obu event.whichi event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichinne keyCode. Dobrą praktyką jest uwzględnienie obu.
keydownzdarzenia zamiast keyuplubkeypress
Jeśli używasz jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaultwydaje się nie zatrzymywać przesyłania formularza, przynajmniej w Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'jest poprawny, jak twierdzą inni komentatorzy. Ponieważ nic się nie zmieniło, zaktualizuję odpowiedź. Użyłem tej odpowiedzi i utknąłem na chwilę, aż wróciłem i spojrzałem na komentarze.
Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});keyCodejest przestarzałe. Jest to bardziej czytelne i
Naciśnięcie klawisza Wykryj Enter na całym dokumencie:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Zastąp onsubmitdziałanie formularza, które ma być wywołaniem funkcji i dodaj po nim return false, tj .:
<form onsubmit="javascript:myfunc();return false;" >Być może najlepszym rozwiązaniem byłoby objęcie jak największej liczby przeglądarek i zabezpieczenie na przyszłość
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")jeśli chcesz to zrobić za pomocą czysto skryptu Java, oto przykład, który działa idealnie
Powiedzmy, że to Twój plik HTML
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>po prostu użyj tej funkcji w pliku popup.js
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});Poniższy kod doda detektor ENTERklucza na całej stronie.
Może to być bardzo przydatne na ekranach z jednym przyciskiem akcji, np. Zaloguj się, zarejestruj się, prześlij itp.
<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>Testowany na wszystkich przeglądarkach.
Rozwiązanie jQuery.
Przybyłem tutaj, aby znaleźć sposób na opóźnienie przesłania formularza, aż do momentu uruchomienia zdarzenia rozmycia przy wprowadzaniu tekstu.
$(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();
});Byłoby miło uzyskać bardziej ogólną wersję, która wyzwalała wszystkie opóźnione zdarzenia, a nie tylko przesłanie formularza.
Używając TypeScript i unikaj wielokrotnych wywołań funkcji
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;">Dodaj ten kod na swojej stronie HTML ... spowoduje wyłączenie ... Enter Button ..
<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>Niektóre starsze przeglądarki zaimplementowały zdarzenia keydown w niestandardowy sposób.
KeyBoardEvent.key to sposób, w jaki powinien zostać zaimplementowany w nowoczesnych przeglądarkach.
which
i keyCodesą obecnie przestarzałe, ale mimo to sprawdzenie tych zdarzeń nie zaszkodzi, aby kod działał dla użytkowników, którzy nadal używają starszych przeglądarek, takich jak IE.
Te isKeyPressedkontrole funkcyjne jeśli wciśnięty klawisz został wejść i event.preventDefault()utrudnia forma od złożenia.
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>