Przesyłasz formularz w „Enter” za pomocą jQuery?

427

Mam standardowy formularz logowania - pole tekstowe e-mail, pole hasła i przycisk przesyłania w projekcie AIR korzystającym z HTML / jQuery. Po naciśnięciu klawisza Enter na formularzu cała zawartość formularza znika, ale formularz nie został przesłany. Czy ktoś wie, czy to jest problem z Webkitem (Adobe AIR używa Webkit do HTMLa), czy też mam problemy?

Próbowałem:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

Ale to nie powstrzymało zachowania rozliczeniowego ani nie przesłało formularza. Z formularzem nie ma żadnych działań - czy to może być problem? Czy mogę umieścić funkcję javascript w akcji?

bądź Hollenbeck
źródło
3
Czy naprawdę masz atrybut class = "input" na swoim <input ...? Wygląda na to, że powinno to być $ („wejście”). Naciśnięcie klawisza ...
NexusRex 10.01.12
Klasy są generowane programowo przez CMS. Poza tym jednak zakres do $ („input”) wpływałby na każde wejście na stronie, niezależnie od tego, czy chciałem tego zachowania, czy nie. Przepraszam, że to obraża twoją wrażliwość.
be hollenbeck
15
Wrażliwości przynajmniej nie urażone. Pomyślałem, że może to być przeoczenie, które prowadzi do problemu. Kontynuować.
NexusRex
1
FYI: Twoja zaakceptowana odpowiedź nie jest całkowicie dokładna. Zobacz moją odpowiedź poniżej.
NoBrainer 24.09.12

Odpowiedzi:

399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

Sprawdź tę odpowiedź stackoverflow: event.preventDefault () vs. return false

Zasadniczo „return false” to to samo co call e.preventDefaulti e.stopPropagation().

NoBrainer
źródło
3
Pamiętaj, że nie są takie same. IE8 nie ma e.preventDefault. W przypadku IE8 użyj event.returnValue = false;
mbokil
8
@mbokil Tyle że w przypadku korzystania z jQuery jest tak samo w IE8. i IE7. I IE6.
Kevin B,
Jeśli chcesz wpisać najpierw w polach wejściowych, wpisz „return false;” wewnątrz instrukcji if.
Juni Brosas
173

Oprócz zwrotu false, jak wspomniał Jason Cohen. Być może będziesz musiał zapobiec domyślnemu

e.preventDefault();
bendewey
źródło
13
jak powiedział @NoBrainer, jest to źle: return falsew zdarzeniu zarządzanym przez jQuery automatycznie wywołuje e.preventDefault ()
Riccardo Galli
83

Nie wiem, czy to pomoże, ale możesz spróbować symulować kliknięcie przycisku wysyłania zamiast bezpośredniego przesyłania formularza. Mam następujący kod w produkcji i działa dobrze:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Uwaga: jQuery ('# upload'). Focus () powoduje animację przycisku po naciśnięciu enter.

karim79
źródło
2
Działa świetnie, ale musiałem dodać „return false”; aby zapobiec podwójnemu złożeniu formularza.
code90
Praca | Zobacz DUŻO wyników takich jak ten mówiący o wyzwalaczu, sendkey itp., Doh, bla ... ale to tylko dla mnie działa i naprawdę wysyła kliknięcie przycisku. Nie przesyłaj (). Sztuczka polegała na tym, że funkcje focus (). Click () działały w tajemnicy. DZIĘKUJĘ CI.
m3nda
Działa, ale musiałem umieścić ten kod pod: $ (dokument) .ready (function () {...
shasi kanth
61

Wróć, falseaby zapobiec kontynuowaniu naciśnięcia klawisza.

Jason Cohen
źródło
30

Czy jest jakiś powód, dla którego musisz podpiąć się i przetestować klawisz Enter?

Nie możesz po prostu dodać

<input type="submit" /> 

do formularza i czy należy go naturalnie przesłać po naciśnięciu klawisza Enter? Możesz nawet zaczepić onsubmitakcję formularza i wywołać stamtąd funkcję sprawdzania poprawności, jeśli chcesz ...

Możesz nawet użyć tego onsubmitjako testu, aby sprawdzić, czy formularz jest przesyłany, ale nie zadziała, jeśli zadzwonisz form.submit().

Zack The Human
źródło
1
Kompletnie się zgadzam. Zawsze wolę korzystać z natywnej funkcjonalności przeglądarki (dane wejściowe typu = wysyłaj natywnie reagują na naciśnięcie klawisza Enter) zamiast dodawać kolejne zakłócone skrypty.
Aaron
1
Problem w tym, co robisz, jeśli robisz rzeczy na stronie ajax i nie ma rzeczywistego odsyłacza zwrotnego do serwera, ale chcesz, aby interfejs użytkownika działał zgodnie z oczekiwaniami użytkownika?
devlord,
Rzeczywiście ... przeoczyłem to return false;wszystko.
devlord,
14

Oto sposób, aby to zrobić jako wtyczkę JQuery (na wypadek, gdybyś chciał ponownie użyć tej funkcji):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Teraz, jeśli chcesz ozdobić <input>element za pomocą tego rodzaju funkcji, jest to tak proste:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );
bvaughn
źródło
12

Możesz także po prostu dodać onsubmit="return false"do kodu formularza na stronie, aby zapobiec domyślnemu zachowaniu.

Następnie podpisz ( .bindlub .live) submitzdarzenie formularza do dowolnej funkcji za pomocą jQuery w pliku javascript.

Oto przykładowy kod, który pomoże:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

JavaScript + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

Działa od 13.04.2011, z Firefox 4.0 i jQuery 1.4.3

GERV
źródło
To nie działa w Chrome. Mimo to prześle.
Marcelo Agimóvel
5

To jest mój kod:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
Hoàng Vũ Tgtt
źródło
4

Aby zachować dostępność, należy użyć tego do ustalenia kodu dostępu:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...
Logan Serman
źródło
3

Tylko dodawanie dla łatwej implementacji. Możesz po prostu utworzyć formularz, a następnie ukryć przycisk przesyłania:

Na przykład:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>
Joem Maranan
źródło
@cebirci i jaką wersją jest twój chrome? Testowałem z laptopów na PC i mój kod po prostu działa. Spróbuj pobrać najnowszy chrome, zanim zaznaczysz go moją odpowiedź.
Joem Maranan
2

Używam teraz

$("form").submit(function(event){
...
}

Na początku dodałem moduł obsługi zdarzeń do przycisku przesyłania, który spowodował błąd.

Faebser
źródło
1

Dowiedziałem się dzisiaj, że naciśnięcie klawisza nie jest uruchamiane po naciśnięciu klawisza Enter, więc możesz zamiast tego przejść na keydown () lub keyup ().

Mój skrypt testowy:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

Dane wyjściowe w konsoli podczas wpisywania „A Enter B” na klawiaturze:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

Widzisz w drugiej sekwencji, że brakuje „naciśnięcia klawisza”, ale kod klawisza i rejestru rejestru „13” jest wciśnięty / zwolniony. Zgodnie z dokumentacją jQuery dotyczącą funkcji keypress () :

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Testowane na IE11 i FF61 na Server 2012 R2

Piemol
źródło
0

W kodach HTML:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

W kodach Js:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}
mghhgm
źródło
1
Nie publikuj identycznych odpowiedzi na wiele pytań. Opublikuj jedną dobrą odpowiedź, a następnie głosuj / oznacz, aby zamknąć pozostałe pytania jako duplikaty. Jeśli pytanie nie jest duplikatem, dopasuj swoje odpowiedzi do pytania.
Paul Roub
@PaulRoub moja odpowiedź różni się od innych.
mghhgm
Jak to inna odpowiedź od tego czy to ?
Paul Roub
@PaulRoub Mam ten problem i najpierw wyszukaj go w Google. Te strony mówią o tym problemie, ale nie są proste. Kiedy znajduję najlepszą odpowiedź, postanowiłem udostępnić to na stronie Tamte strony, aby pomóc użytkownikom w wyszukiwaniu, zobacz moją odpowiedź na niektórych podobnych stronach z przepływem stosów.
mghhgm
1
ta odpowiedź w ogóle nie jest związana z pytaniem
Zoltán Süle,
-4

Spróbuj tego:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}
czarnuch
źródło
9
To mieszanie jquery z waniliowym javascript w niewygodny sposób i obejmuje naprawdę dziwną obsadę, która po prostu myli rzeczy
moopet