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

Aby przesł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. na znaczniku div:

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

Jest to również domyślne zachowanie przeglądarki Internet Explorer 7 (prawdopodobnie również wcześniejsze wersje).

Próbowałem różnych strategii opartych na javascript / jQuery, ale wciąż miałem problemy. Najnowszy problem polegał na przypadkowym przesłaniu, gdy użytkownik używa klawisza enter, aby wybrać z wbudowanej listy automatycznego uzupełniania przeglądarki. W końcu przełączyłem się na tę strategię, która wydaje się działać na wszystkich przeglądarkach, które obsługuje moja firma: {]}

<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: none, wydaje się działać poprawnie na wszystkich przeglądarki.

Update

Edytowałem powyższy kod, aby zawierał negatyw tabindex, aby nie przechwytywał klucza tab. Chociaż technicznie nie będzie to sprawdzać w HTML 4, specyfikacja HTML5 zawiera język, aby działał tak, jak większość przeglądarek i tak go implementowała.

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

Przyciski utworzone za pomocą funkcji BUTTON element, podobnie jak przyciski utworzone za pomocą elementu INPUT, ale oferują bogatsze możliwości renderowania: element BUTTON może mieć zawartość. Na przykład element przycisku, który zawiera obraz, działa jak i może przypominać element wejściowy, którego typ jest ustawiony na "obraz", ale Typ elementu przycisku zezwala na zawartość.

W zasadzie jest inny tag, <button>, który nie wymaga javascript , który może również przesłać formularz. Może być stylizowany w sposób podobny do znacznika <div> (w tym <img /> wewnątrz znacznika przycisku). Przyciski ze znacznika <input /> nie są tak elastyczne.

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

Istnieją trzy typy do Ustawienia na <button>; mapują one do typów przycisków <input>.

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

Standardy

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

Używam tagów <button>z css-spritesi trochę stylizacji css, aby uzyskać kolorowe i funkcjonalne przyciski formularza. Zauważ, że możliwe jest pisanie css na przykład dla linków <a class="button"> współdzielonych ze stylizacją za pomocą elementu <button>.

Wierzę, że tego właśnie 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();
}
//]]>

Po każdym naciśnięciu klawisza zostanie wywołana funkcja enter (). Jeśli wciśnięty klawisz pasuje do klawisza enter (13), wtedy zostanie wywołana sendform () i zostanie wysłany pierwszy napotkany formularz. Jest to tylko dla Firefoksa i innych przeglądarek zgodnych ze standardami.

Jeśli uznasz ten kod za przydatny, koniecznie zagłosuj na mnie!

Oto Jak to robię z jQuery

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

Inny javascript nie byłby zbyt różny. funkcja catch sprawdza, czy nie ma argumentu "13", który jest klawiszem 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>

Dla każdego pola, które powinno przesłać formularz, gdy użytkownik naciśnie enter, wywołaj funkcję submitenter 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>

W zasadzie, dodaję tylko niewidoczne wejście typu image (Gdzie ".gif " jest przezroczystym gif 1x1).

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

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

Myślę, że powinieneś mieć przycisk submit lub wyślij obraz... Czy masz konkretny powód, dla którego używasz "submit div"? Jeśli chcesz tylko niestandardowe style polecam <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Podobny do przykładu Chrisa Marasti-Georga, zamiast tego używa wbudowanego javascript. Zasadniczo dodaj onkeypress do pól, z którymi chcesz pracować klawisz enter. Ten przykład działa na polu Hasło.

<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: none przyciski i wejścia nie będą działać w Safari i IE, odkryłem, że najprostszym sposobem, wymagającym żadnych dodatkowych hacków javascript , jest po prostu dodanie absolutnie umieszczonego <button /> do formularza i umieszczenie go daleko od ekranu.

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

To działa w obecnej wersji wszystkich głównych przeglądarek od września 2016.

Oczywiście jego zalecane (i bardziej semantycznie poprawne) po prostu styl <button/> zgodnie z życzeniem.

Używanie atrybutu "autofocus" domyślnie nadaje przyciskowi ostrość wejściową. W rzeczywistości kliknięcie dowolnej kontroli w formularzu również powoduje skupienie się na formularzu, wymóg, aby formularz reagował na zwrot. Tak więc "autofocus" robi to za Ciebie, jeśli użytkownik nigdy nie kliknął żadnej innej kontroli w formularzu.

Tak więc, "autofocus" robi kluczową różnicę, jeśli użytkownik nigdy nie kliknął żadnego z kontrolek formularza przed naciśnięciem RETURN.

Ale nawet wtedy, tam są jeszcze 2 warunki, 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 ją usunąć ze strony, aby ukryć, ale nie można użyć funkcji display: none ani visibility: hidden. To, co zrobiłem, było użycie stylu inline, aby po prostu przenieść go ze strony w lewo o 200px. Zrobiłem wysokość 0px tak, że nie zajmuje miejsca. Bo inaczej może jeszcze zakłócić inne sterowanie powyżej i poniżej. Albo 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>