Jak przesłać formularz po naciśnięciu klawisza powrotu?

Czy ktoś może mi powiedzieć, jak wysłać formularz HTML po naciśnięciu klawisza powrotu i jeśli w formularzu nie ma przycisków? Nie ma przycisku przesyłania . Zamiast tego używam niestandardowego elementu div.

IMO, to najczystsza odpowiedź:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Jeszcze lepiej, jeśli używasz javascript do przesyłania formularza za pomocą niestandardowego div, powinieneś również użyć javascript do jego utworzenia i ustawić styl display: none na przycisku. W ten sposób użytkownicy z wyłączoną obsługą javascript nadal będą widzieć przycisk przesyłania i będą mogli go kliknąć.

Zauważono, że display: none spowoduje ignorowanie danych wejściowych przez IE. Utworzyłem nowy przykład JSFiddle, który zaczyna się jako standardowy formularz i używa progresywnego ulepszania, aby ukryć przesyłanie i utworzyć nowy element div. Użyłem stylu CSS ze StriplingWarrior .

Aby wysłać formularz po naciśnięciu klawisza Enter, utwórz funkcję javascript wzdłuż tych linii.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Następnie dodaj zdarzenie do dowolnego zakresu, którego potrzebujesz, np. W znaczniku DIV:

<div onKeyPress="return checkSubmit(event)"/>

Jest to jednak i tak domyślne zachowanie przeglądarki Internet Explorer 7 (prawdopodobnie również wcześniejszych wersji).

Próbowałem różnych strategii opartych na javascript / jQuery, ale wciąż miałem problemy. Ostatni problem, który się pojawił, dotyczył przypadkowego przesłania, gdy użytkownik użył klawisza Enter, aby wybrać z wbudowanej listy autouzupełniania przeglądarki. W końcu przeszedłem na tę strategię, która wydaje się działać na wszystkich przeglądarkach obsługiwanych przez moją firmę:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Jest to podobne do obecnie akceptowanej odpowiedzi Chrisa Marasti-Georga, ale unikając display: nonejej, wydaje się, że działa poprawnie we wszystkich przeglądarkach.

Aktualizacja

Edytowałem powyższy kod, aby uwzględnić negatyw, tabindexwięc nie przechwytuje klawisza tabulacji. Chociaż technicznie nie sprawdza się to w HTML 4, specyfikacja HTML5 zawiera język, dzięki któremu działa tak, jak większość przeglądarek już ją implementowała.

Użyj <button>tagu. Ze standardu W3C:

Przyciski utworzone za pomocą elementu BUTTON działają podobnie jak przyciski utworzone za pomocą elementu INPUT, ale oferują bogatsze możliwości renderowania: element BUTTON może mieć treść. Na przykład element BUTTON zawierający obraz działa jak i może przypominać element INPUT, którego typ jest ustawiony na „obraz”, ale typ elementu BUTTON dopuszcza zawartość.

Zasadniczo istnieje inny tag, <button>który nie wymaga javascript , a który również może przesłać formularz. Można go stylizować na wzór <div>tagu (w tym <img />wewnątrz tagu przycisku). Przyciski z <input />tagu nie są tak elastyczne.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Istnieją trzy typy do ustawienia <button>; odwzorowują <input>typy przycisków.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Normy

• Wiki W3C o <button>
• HTML5 <button>
• HTML4 <button>

Używam <button>tagów zcss-sprites i trochę cssstylizacja, aby uzyskać kolorowe i funkcjonalne guziki. Zwróć uwagę, że można napisać css, na przykład dla <a class="button">linków współdzielonych ze stylizacją z <button>elementem.

Wierzę, że tego chcesz.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Za każdym naciśnięciem klawisza wywoływana jest funkcja enter (). Jeśli naciśnięty klawisz pasuje do klawisza enter (13), to zostanie wywołana sendform () i zostanie wysłany pierwszy napotkany formularz. Dotyczy to tylko przeglądarki Firefox i innych przeglądarek zgodnych ze standardami.

Jeśli uznasz ten kod za przydatny, nie zapomnij zagłosować na mnie!

Oto jak to robię za pomocą jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Inne javascript nie byłyby zbyt różne. haczyk sprawdza argument keypress o wartości „13”, czyli klawisz Enter

Użyj następującego skryptu.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

W przypadku każdego pola, które powinno przesłać formularz, gdy użytkownik wejdzie w okno, wywołaj funkcję wysyłającą w następujący sposób.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Używam tej metody:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

Zasadniczo dodam tylko niewidoczne dane wejściowe typu image (gdzie „ spacer.gif ” to 1x1 przezroczysty gif).

W ten sposób mogę przesłać ten formularz za pomocą przycisku „wyślij” lub po prostu naciskając klawisz Enter na klawiaturze.

To jest sztuczka!

Dlaczego po prostu nie zastosujesz stylów przesyłania div do przycisku przesyłania? Jestem pewien, że istnieje do tego javascript, ale to byłoby łatwiejsze.

Jeśli używasz asp.net, możesz użyć atrybutu defaultButton w formularzu.

Myślę, że w rzeczywistości powinieneś mieć przycisk przesyłania lub obraz przesyłania ... Czy masz konkretny powód, aby używać „elementu div”? Jeśli chcesz tylko niestandardowe style, polecam <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Rozszerzając odpowiedzi, to mi się udało, może komuś się przyda.

HTML

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Podobnie jak w przykładzie Chrisa Marasti-Georga, zamiast tego używa wbudowanego javascript. Zasadniczo dodaj onkeypress do pól, z którymi ma współpracować klawisz Enter. Ten przykład działa w polu hasła.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Ponieważ display: noneprzyciski i dane wejściowe nie działają w Safari i IE, odkryłem, że najłatwiejszym sposobem, nie wymagającym dodatkowych hacków javascript , jest po prostu dodanie absolutnie pozycjonowanego <button />do formularza i umieszczenie go daleko poza ekranem.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Działa to w aktualnej wersji wszystkich głównych przeglądarek od września 2016 r.

Oczywiście jego zalecane (i bardziej poprawne semantycznie) po prostu stylizowanie <button/>według potrzeb.

Użycie atrybutu „autofocus” działa, aby domyślnie nadać fokus przyciskowi. W rzeczywistości kliknięcie dowolnego elementu sterującego w formularzu również powoduje uaktywnienie formularza, co jest wymogiem, aby formularz zareagował na POWRÓT. Tak więc „autofokus” robi to za Ciebie na wypadek, gdyby użytkownik nigdy nie kliknął żadnej innej kontrolki w formularzu.

Tak więc „autofokus” ma zasadnicze znaczenie, jeśli użytkownik nigdy nie kliknął żadnej kontrolki formularza przed naciśnięciem przycisku RETURN.

Ale nawet wtedy nadal istnieją 2 warunki, które muszą być spełnione, aby to działało bez JS:

a) musisz określić stronę, do której chcesz przejść (jeśli pozostanie pusta, nie zadziała). W moim przykładzie jest to hello.php

b) kontrola musi być widoczna. Można sobie wyobrazić, że można go usunąć ze strony, aby ukryć, ale nie można użyć display: none lub visibility: hidden. To, co zrobiłem, to użycie stylu wbudowanego, aby po prostu przesunąć go ze strony w lewo o 200 pikseli. Wysokość ustawiłem na 0px, aby nie zajmowała miejsca. Ponieważ w przeciwnym razie nadal może zakłócać inne kontrolki powyżej i poniżej. Lub możesz też unosić element.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>