Wprowadź zdarzenie naciśnięcia klawisza w JavaScript

330

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?

javascript forms keypress dom-events enter Shyju
źródło

Odpowiedzi:

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

UWAGA:

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.

Josh
źródło
4
Co dokładnie rozumiesz przez użytkownika? Na przykład użytkownik wpisuje skrypt w polu tekstowym i uruchamiasz go za pomocą Eval () ???
Josh
1
Czy jest to sytuacja, w której można zastosować PreventDefualt?
12
@ Stuart.Sklinar - Dokonując oceny na wejściu, użytkownik wpisał do przeglądarki nie daje im więcej kontroli, niż gdyby otworzył konsolę poleceń w Chrome / FF / IE i sam wpisał skrypt. Jedyną osobą, którą mogą skrzywdzić, są sami ... chyba że nie egzekwujesz bezpieczeństwa na serwerze. To zupełnie inna kwestia.
Josh
1
@ SteelBrain - Ponownie, nadanie komuś pola tekstowego, w którym można wpisać, a następnie 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.
Josh
5
keyCodejest teraz przestarzałe
John Slegers
137

Użyj obu event.whichi event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
źródło
11
Dlaczego zarówno event.which, jak i event.keyCode?
Alex Spurling,
35
Niektóre przeglądarki obsługują whichinne keyCode. Dobrą praktyką jest uwzględnienie obu.
user568109
Użyj również keydownzdarzenia zamiast keyuplubkeypress
manish_s
@Agiagnoc, ale do jakiego wydarzenia należy to dołączyć?
Don Cheadle,
2
@manish, naciśnięcie klawisza daje więcej informacji do zabawy niż keydown / up. stackoverflow.com/a/9905293/322537
Hermann Ingjaldsson
78

Jeśli używasz jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
kowboj
źródło
1
Nie mogłem tego uruchomić. Program obsługi uruchamia się, ale preventDefaultwydaje się nie zatrzymywać przesyłania formularza, przynajmniej w Chrome.
Drew Noakes
19
Musisz użyć zdarzenia keydown zamiast keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov,
2
keyup jest uruchamiany PO przesłaniu i dlatego nie można go anulować.
Pierre-Olivier Vares,
Zarówno klawisz, jak i naciśnięcie klawisza działały dla mnie. Poszedłem z naciśnięciem klawisza. Dzięki!
markiyanm
'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.
Matt K
71

event.key === „Enter”

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

Dokumenty Mozilla

Obsługiwane przeglądarki

Gibolt
źródło
Szukałem tego. widział kluczową właściwość w dzienniku konsoli zdarzenia $. pomyślałem, że może być bardziej niezawodny
tatsu
czy to nie jest tylko makro lub alias? czy jest jakaś korzyść pod względem wydajności przy użyciu tego kodu?
clockw0rk
1
keyCodejest przestarzałe. Jest to bardziej czytelne i
łatwe w
17

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;" >
rpkelly
źródło
Nie mogę zastąpić przesłania, ponieważ mam inną formę przesłania na tej stronie
Shyju
5
tak, możesz. JavaScript jest językiem opartym na prototypach. document.forms ["nazwa_formy"]. onsubmit = fucntion () {}
the_drow
Mam inną procedurę usuwania do uruchomienia po przesłaniu formularza, więc chcę zachować taką, jaka jest
Shyju
17

Reaguje rozwiązanie js

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


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
kofeina
źródło
9

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")
Matt Doran
źródło
6

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 ");
    }
});
DINA TAKLIT
źródło
5

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.

Hitesh Sahu
źródło
3

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.

chim
źródło
3

Z mojej perspektywy znacznie prostszym i skuteczniejszym sposobem powinno być: 

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

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
Thanos
źródło
2

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
}
Wagner Pereira
źródło
To pytanie ma ponad osiem lat. Maszynopis nie istniał wtedy. Jesteś pewien, że nie odpowiadasz na inne pytanie?
Nico Haase
2

Trochę proste

Nie wysyłaj formularza po naciśnięciu klawisza „Enter”:

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

Wykonaj funkcję po naciśnięciu klawisza „Enter”:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
rbz
źródło
1

native js (pobierz api)

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">
Rozwiń fragment kodu

xgqfrms
źródło
Dlaczego uwzględniono tutaj client_id itp? Czy kod jest zgodny z prawem?
eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Dodaj ten kod na swojej stronie HTML ... spowoduje wyłączenie ... Enter Button ..

Akhilesh Singh
źródło
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
źródło
0

Rozwiązanie dla wielu przeglądarek

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');
  }

Minimalny przykład roboczy

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
źródło