Cóż, próbuję przesłać formularz, naciskając klawisz Enter, ale nie wyświetlając przycisku przesyłania. Nie chcę wchodzić w JavaScript, jeśli to możliwe, ponieważ chcę, aby wszystko działało we wszystkich przeglądarkach (jedyny sposób, w jaki znam JS, to zdarzenia).
W tej chwili formularz wygląda następująco:
<form name="loginBox" target="#here" method="post">
<input name="username" type="text" /><br />
<input name="password" type="password" />
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>
Który działa całkiem dobrze. Przycisk przesyłania działa, gdy użytkownik naciśnie klawisz Enter, a przycisk nie jest wyświetlany w przeglądarkach Firefox, IE, Safari, Opera i Chrome. Jednak nadal nie podoba mi się to rozwiązanie, ponieważ trudno jest wiedzieć, czy będzie działać na wszystkich platformach ze wszystkimi przeglądarkami.
Czy ktoś może zaproponować lepszą metodę? Czy jest to tak dobre, jak to możliwe?
Odpowiedzi:
Próbować:
Spowoduje to przesunięcie przycisku waaay w lewo, poza ekran. Zaletą tego jest to, że przy wyłączonym CSS można uzyskać płynną degradację.
Aktualizacja - obejście dla IE7
Zgodnie z sugestią Bryana Downinga +,
tabindex
aby nie dopuścić do przejścia karty do tego przycisku (autor: Ates Goral):źródło
position: absolute; width: 1px; height: 1px; left: -9999px;
tabindex="-1"
Myślę, że powinieneś iść drogą JavaScript, a przynajmniej ja:
źródło
keydown
z, abykeypress
uzyskać szersze wsparcie, ale musisz również dodaće.preventDefault();
przed,if
jeśli masz nadzieję na obsługę Chrome..on('keypress'...)
zamiast tego możesz użyć . Dokumenty.on()
wyglądają tak, jakby.preventDefault()
zadzwoniły do Ciebie.Próbowałeś tego?
Ponieważ większość przeglądarek to rozumie
visibility:hidden
i tak naprawdę nie działadisplay:none
, myślę, że powinno być dobrze. Sam tak naprawdę tego nie testowałem, więc CMIIW.źródło
visibility: hidden
: jak można przeczytać w w3schools , visibity: żadna nie wpływa na układ. Jeśli chcesz uniknąć tego spacji, rozwiązanie z absolutnym pozycjonowaniem wydaje mi się lepsze.<input type="submit" style="visibility: hidden; position: absolute;" />
position: absolute; left: -100px; width: 1px; height: 1px;
Inne rozwiązanie bez przycisku Prześlij:
HTML
jQuery
źródło
Dla każdego, kto patrzy na tę odpowiedź w przyszłości, HTML5 implementuje nowy atrybut dla elementów formularza
hidden
, który automatycznie zastosuje siędisplay:none
do twojego elementu.na przykład
źródło
Użyj następującego kodu, to naprawiło mój problem we wszystkich 3 przeglądarkach (FF, IE i Chrome):
Dodaj powyższą linię jako pierwszą linię w kodzie z odpowiednią wartością nazwy i wartości.
źródło
Zamiast hacka, którego obecnie używasz do ukrywania przycisku, o wiele łatwiej byłoby ustawić
visibility: collapse;
atrybut style. Jednak nadal zalecałbym użycie trochę prostego Javascript do przesłania formularza. O ile rozumiem, wsparcie dla takich rzeczy jest obecnie wszechobecne.źródło
Po prostu ustaw ukryty atrybut na true:
źródło
Najbardziej eleganckim sposobem na to jest przytrzymanie przycisku przesyłania, ale ustawienie jego obramowania, wypełnienia i rozmiaru czcionki na 0.
Spowoduje to, że przycisk będzie miał wymiary 0x0.
Możesz tego spróbować sam, a ustawiając kontur elementu, zobaczysz kropkę, która jest zewnętrzną ramką „otaczającą” element 0x0 px.
Brak potrzeby widoczności: ukryty, ale jeśli sprawia, że śpisz w nocy, możesz to również wrzucić do miksu.
JS Fiddle
źródło
IE nie pozwala na naciśnięcie klawisza ENTER w celu przesłania formularza, jeśli przycisk wysyłania nie jest widoczny, a formularz ma więcej niż jedno pole. Daj mu to, czego chce, zapewniając przezroczysty obraz 1x1 pikseli jako przycisk wysyłania. Oczywiście zajmie to piksel układu, ale spójrz, co musisz zrobić, aby go ukryć.
źródło
To jest moje rozwiązanie przetestowane w Chrome, Firefox 6 i IE7 +:
źródło
Działa to dobrze i jest to najbardziej jednoznaczna wersja tego, co próbujesz osiągnąć.
Zauważ, że istnieje różnica między
display:none
ivisibility:hidden
dla innych elementów formularza.źródło
Rozwiązanie HTML5
źródło
najprostszy sposób
źródło
Dla tych, którzy mają problemy z IE i dla innych.
źródło
float: left;
, gdy zostanie usunięty, przesyła.Możesz także spróbować tego
Możesz dołączyć obraz o szerokości / wysokości = 0 px
źródło
Pracuję z wieloma frameworkami interfejsu użytkownika. Wiele z nich ma wbudowaną klasę, której można używać do wizualnego ukrywania rzeczy.
Bootstrap
Materiał kątowy
Genialne umysły, które stworzyły te ramy, zdefiniowały te style w następujący sposób:
źródło
Dodałem go do funkcji gotowego dokumentu. Jeśli w formularzu nie ma przycisku przesyłania (wszystkie moje formularze dialogu Jquery nie mają przycisków przesyłania), dołącz go.
źródło
źródło
Użyłem:
i:
w pliku .css. Dla mnie też zadziałało magicznie. :)
źródło