Mam jedno wprowadzanie tekstu i jeden przycisk (patrz poniżej). Jak użyć JavaScript, aby wywołać zdarzenie kliknięcia przycisku po Enternaciśnięciu klawisza w polu tekstowym?
Na mojej bieżącej stronie jest już inny przycisk przesyłania, więc nie mogę po prostu ustawić przycisku jako przycisku przesyłania. A ja tylko chcesz, Enterkluczem do tego konkretnego kliknij przycisk, jeśli jest naciśnięty w tym jeden z pola tekstowego, nic innego.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
javascript
button
onclick
onkeypress
Kdenney
źródło
źródło
Odpowiedzi:
W jQuery działałyby:
Lub w zwykłym JavaScript, działałyby następujące czynności:
źródło
keydown
niekeyup
jest to lepsze wydarzenie do użycia. Ponadto, jeśli używasz asp.net, będziesz musiałreturn false
na końcu zatrzymać asp.net przed przechwyceniem zdarzenia.keydown
polega na tym, że przytrzymanie wciśniętego klawisza Enter powoduje ciągłe uruchamianie zdarzenia. jeśli dołączysz dokeyup
wydarzenia, uruchomi się ono dopiero po zwolnieniu klucza.event.preventDefault();
przed wywołaniemclick();
funkcji, podczas gdy moja strona ma postać a ja przełączanekeyup
zkeypress
jak to było handler tylko pracuje dla mnie, tak czy inaczej, dzięki za czystego kawałka kodu!Następnie po prostu wpisz to!
źródło
Zrozumiałem to:
źródło
Ustaw przycisk jako element przesyłania, aby był automatyczny.
Zauważ, że potrzebujesz
<form>
elementu zawierającego pola wejściowe, aby to zadziałało (dzięki Sergey Ilinsky).Przedefiniowanie standardowego zachowania nie jest dobrą praktyką, Enterklucz powinien zawsze wywoływać przycisk wysyłania w formularzu.
źródło
<form>
tagi są wyrzucane przez inaczej liberalny parser HTML. Muszę więc przejąć naciśnięcia klawiszy lub odpaść. (BTW, naciśnięcie Enter w SharePoint uruchamia tryb edycji z jakiegoś powodu.<button type="submit" onclick="return doSomething(this)">Value</button>
Działa. Wskazówka leży wreturn
słowach kluczowychPonieważ nikt
addEventListener
jeszcze nie korzystał , oto moja wersja. Biorąc pod uwagę elementy:Użyłbym następujących:
Pozwala to na osobną zmianę typu zdarzenia i akcji, przy jednoczesnym zachowaniu czystości HTML.
źródło
e.preventDefault()
polecenie pracy z formularzami. Zobacz moją (nową) odpowiedź .if (event.keyCode == 13) { event.preventDefault(); go.click();}
W prostym JavaScript
Zauważyłem, że odpowiedź jest podana tylko w jQuery, więc pomyślałem o podaniu czegoś w zwykłym JavaScript.
źródło
evt.which ? evt.which : evt.keyCode
jest równyevt.which || evt.keyCode
Jedna podstawowa sztuczka, której możesz użyć do tego, o której nie wspomniałem w pełni. Jeśli chcesz wykonać akcję ajax lub wykonać inną pracę na Enter, ale nie chcesz przesyłać formularza, możesz to zrobić:
Ustawienie akcji = "javascript: void (0);" taki skrót to zasadniczo zapobieganie domyślnemu zachowaniu. W tym przypadku wywoływana jest metoda bez względu na to, czy naciśniesz klawisz Enter, czy klikniesz przycisk, a następnie zostanie wykonane wywołanie ajax w celu załadowania niektórych danych.
źródło
searchCriteria.blur();
doonsubmit
.Spróbuj:
źródło
Aby uruchomić wyszukiwanie przy każdym naciśnięciu klawisza Enter, użyj:
źródło
To tylko coś, co mam z nieco niedawnego projektu ... Znalazłem to w sieci i nie mam pojęcia, czy jest lepszy sposób, czy nie w zwykłym starym JavaScript.
źródło
Używaj
keypress
ievent.key === "Enter"
z nowoczesnym JS!Dokumenty Mozilla
Obsługiwane przeglądarki
źródło
Chociaż jestem całkiem pewien, że tak długo, jak w formularzu jest tylko jedno pole i jeden przycisk przesyłania, naciśnięcie Enter powinno przesłać formularz, nawet jeśli na stronie jest inny formularz.
Następnie możesz przechwycić formularz onsubmit za pomocą js i wykonać dowolną walidację lub wywołania zwrotne, jakie chcesz.
źródło
Nikt nie zauważył html attibute „klucz dostępu”, który jest dostępny od dłuższego czasu.
Jest to sposób na javascript do skrótów klawiaturowych.
Klucz dostępu przypisuje skróty do MDN
Przeznaczony do użycia w ten sposób. Sam atrybut html wystarczy, jednak możemy zmienić symbol zastępczy lub inny wskaźnik w zależności od przeglądarki i systemu operacyjnego. Skrypt jest niesprawdzonym podejściem od podstaw, aby dać pomysł. Możesz użyć detektora biblioteki przeglądarki, takiego jak mały Bowser
źródło
s
.To rozwiązanie dla wszystkich miłośników YUI :
W tym szczególnym przypadku miałem lepsze wyniki przy użyciu YUI do wyzwalania obiektów DOM, które zostały wstrzyknięte z funkcją przycisku - ale to inna historia ...
źródło
W Angular2 :
Jeśli nie chcesz wizualnego sprzężenia zwrotnego w przycisku, dobrym pomysłem jest nie odwoływać się do przycisku, a raczej bezpośrednio wywoływać kontroler.
Identyfikator nie jest również potrzebny - inny sposób na rozdzielenie widoku i modelu w NG2.
źródło
W tym przypadku chcesz również wyłączyć przycisk Enter z Księgowania na serwer i wykonać skrypt Js.
źródło
Ten onchange próba jest blisko, ale niegrzeczne w stosunku do przeglądarki, a następnie z powrotem do przodu (na Safari 4.0.5 i Firefox 3.6.3), więc ostatecznie nie polecam go.
źródło
Użyj go podczas obsługi zdarzenia lub w funkcji wywoływanej przez moduł obsługi zdarzeń.
Działa przynajmniej w Internet Explorerze i Operze.
źródło
Na jquery mobile musiałem to zrobić
źródło
.live
jest przestarzałe w jQuery 1.7. Czy w jQuery Mobile nadal uważa się to za prawidłowe?Aby dodać całkowicie proste rozwiązanie JavaScript, które rozwiązało problem @ icedwater ze złożeniem formularza , oto kompletne rozwiązanie z
form
.Skrzypce: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
JavaScript
źródło
W nowoczesnym, nieaktualnym (bez
keyCode
lubonkeydown
) JavaScript:źródło
Oto moje dwa centy. Pracuję nad aplikacją dla systemu Windows 8 i chcę, aby przycisk zarejestrował zdarzenie kliknięcia po naciśnięciu przycisku Enter. Robię to w JS. Wypróbowałem kilka sugestii, ale miałem problemy. To działa dobrze.
źródło
charCode
13 gdziekolwiek indziej, strzelaszprintResult()
.Aby to zrobić za pomocą jQuery:
Aby to zrobić za pomocą normalnego JavaScript:
źródło
Dla tych, którzy mogą lubić zwięzłość i nowoczesne podejście js.
gdzie input jest zmienną zawierającą twój element wejściowy.
źródło
W jQuery możesz użyć
event.which==13
. Jeśli maszform
, możesz użyć$('#formid').submit()
(z poprawnymi detektorami zdarzeń dodanymi do przesłanego formularza).źródło
Opracowałem niestandardowy język JavaScript, aby osiągnąć tę funkcję, po prostu dodając klasę
Przykład:
<button type="button" class="ctrl-p">Custom Print</button>
Tutaj Sprawdź to Fiddle
- lub -
sprawdź działający przykład https://stackoverflow.com/a/58010042/6631280
źródło
W nowoczesnym JS
keyUp
jest przestarzałe, użyjkey
zamiast niegoźródło
Może to również pomóc, mała funkcja JavaScript, która działa dobrze:
Wiem, że to pytanie zostało rozwiązane, ale właśnie znalazłem coś, co może być pomocne dla innych.
źródło