Mam stronę z dwoma przyciskami. Jeden to <button>
element, a drugi to <input type="submit">
. Przyciski pojawiają się na stronie w tej kolejności. Jeśli znajdę się w polu tekstowym w dowolnym miejscu formularza i naciśnę <Enter>
, click
zostanie wyzwolone zdarzenie elementu przycisku . Zakładam, że to dlatego, że element przycisku znajduje się jako pierwszy.
Nie mogę znaleźć niczego, co wygląda na niezawodny sposób ustawienia domyślnego przycisku, ani też nie chcę tego robić w tym momencie. Wobec braku czegoś lepszego złapałem naciśnięcie klawisza w dowolnym miejscu formularza i, jeśli to był <Enter>
klawisz, który został naciśnięty, po prostu go neguję:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
O ile wiem, wydaje się, że działa, ale wydaje się niesamowicie uparty.
Czy ktoś zna bardziej wyrafinowaną technikę robienia tego?
Podobnie, czy są jakieś pułapki w tym rozwiązaniu, których po prostu nie jestem świadomy?
Dzięki.
Odpowiedzi:
Za pomocą
powinien załatwić sprawę.
Przyczyną jest to, że przycisk wewnątrz formularza ma niejawnie ustawiony typ
submit
. Jak mówi zzzzBoz, specyfikacja mówi, że w tej sytuacji wyzwalany jest pierwszybutton
lubinput
ztype="submit"
. Jeśli ustawisz to specjalnietype="button"
, przeglądarka nie bierze tego pod uwagę.źródło
type="button"
wydaje się , że rozwiązują ten problem ... Dzięki! ps jakiś pomysł, dlaczego tak jest? ie8 traktuje przyciski jako typ przesyłania? Dziwne.<input type="submit"/>
(spowoduje kliknięcie) i<input type="button"/>
(nie uruchomi kliknięcia)Ważne jest, aby przeczytać specyfikację HTML, aby naprawdę zrozumieć, jakiego zachowania można się spodziewać:
Specyfikacja HTML5 wyraźnie określa, co dzieje się w
implicit submissions
:Nie było to wyraźnie określone w specyfikacji HTML4, jednak przeglądarki już implementowały to, co jest opisane w specyfikacji HTML5 (dlatego jest to wyraźnie uwzględnione).
Edytuj, aby dodać:
Najprostszą odpowiedzią, jaką przychodzi mi do głowy, jest umieszczenie przycisku przesyłania jako pierwszego
[type="submit"]
elementu formularza, dodanie dopełnienia u dołu formularza za pomocą css i absolutnie umieszczenie przycisku przesyłania u dołu, tam, gdzie chcesz.źródło
Myślę, że nie potrzebujesz javascript lub CSS, aby to naprawić.
Zgodnie ze specyfikacją html 5 dla przycisków przycisk bez atrybutu typu jest traktowany tak samo jak przycisk z typem ustawionym na „wyślij”, czyli jako przycisk do przesłania formularza zawierającego. Ustawienie typu przycisku na „przycisk” powinno zapobiec występującemu zachowaniu.
Nie jestem pewien, czy przeglądarka obsługuje to, ale to samo zachowanie zostało określone w specyfikacji HTML 4.01 dla przycisków, więc spodziewam się, że jest całkiem niezłe.
źródło
Naciskając „Enter” na fokusie
<input type="text">
wywołujesz zdarzenie „click” na pierwszym pozycjonowanym elemencie:<button>
lub<input type="submit">
. Jeśli naciśniesz „Enter”<textarea>
, po prostu utworzysz nową linię tekstu.Zobacz przykład tutaj .
Twój kod uniemożliwia utworzenie nowej linii tekstu
<textarea>
, więc musisz złapać naciśnięcie klawisza tylko dla<input type="text">
.Ale dlaczego musisz naciskać
Enter
w polu tekstowym? Jeśli chcesz wysłać formularz, naciskając „Enter”, ale<button>
musi pozostać jako pierwszy w układzie, po prostu baw się znacznikami: umieść<input type="submit">
kod przed<button>
i użyj CSS, aby zapisać potrzebny układ.Łapanie „Enter” i zapisywanie znaczników:
źródło
Gdziekolwiek używasz
<button>
elementu domyślnie, on bierze pod uwagę ten przycisk,type="submit"
więc jeśli zdefiniujesz przycisk,type="button"
nie będzie go traktował<button>
jako przycisku przesyłania.źródło
Naciśnięcie klawisza Enter w polu tekstowym formularza spowoduje domyślnie przesłanie formularza. Jeśli nie chcesz, aby działało w ten sposób, musisz uchwycić klawisz Enter i konsumować go tak, jak zrobiłeś. Nie da się tego obejść. Będzie to działać w ten sposób, nawet jeśli w formularzu nie ma przycisku.
źródło
click
działanie na elementy przycisku życzeniem jest niezamierzone konsekwencjeMożesz użyć javascript, aby zablokować przesyłanie formularzy do odpowiedniego czasu. Bardzo surowy przykład:
Naciśnięcie klawisza Enter nadal będzie powodować przesłanie formularza, ale skrypt javascript uniemożliwi jego rzeczywiste przesłanie, dopóki nie naciśniesz przycisku.
źródło
Przykład Dom
javascript
jeśli nie użyjesz opcji PreventDefault (), zostaną uruchomione inne przyciski.
źródło
Zrobiłbym to w następujący sposób: W programie obsługi zdarzenia onclick przycisku (nie przesyłaj) sprawdź kod klucza obiektu zdarzenia. Jeśli to „enter”, zwróciłbym fałsz.
źródło
Moja sytuacja ma dwa
Submit
przyciski w elemencie formularza:Update
iDelete
.Delete
Przycisk usuwa obraz iUpdate
przycisk aktualizuje bazę danych z pól tekstowych w formularzu.Ponieważ
Delete
przycisk był pierwszy w formularzu, był to domyślny przycisk naEnter
klawiszu. Nie to, czego chciałem. Użytkownik spodziewałby się trafieniaEnter
po zmianie niektórych pól tekstowych.Znalazłem swoją odpowiedź na ustawienie przycisku domyślnego tutaj :
Nie używając żadnego skryptu, zdefiniowałem formularz, do którego należy każdy przycisk, używając
<button> form="bla"
atrybutu. UstawiłemDelete
przycisk na formularz, który nie istnieje, i ustawiłemUpdate
przycisk, który chciałem wywołać naEnter
klawiszu, na formularz, w którym użytkownik będzie się znajdował podczas wprowadzania tekstu.To jedyna rzecz, która do tej pory działała dla mnie.
źródło
Możesz zrobić coś takiego.
przypisz swoje zdarzenie do wspólnej funkcji i wywołaj zdarzenie naciskając klawisz lub przycisk.
na przykład.
źródło
Dodałem przycisk typu „wyślij” jako pierwszy element formularza i uczyniłem go niewidocznym (
width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;
). Działa jak odświeżanie strony, tzn. Nie robię nic po naciśnięciu przycisku poza tym, że strona jest ponownie ładowana. U mnie działa dobrze ...źródło