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?


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().


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();

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.


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


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().


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
    } );

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


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();
    }
    });

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

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>

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


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


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
        }
    });
}

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();
        }
    })
}

9
To mieszanie jquery z waniliowym javascript w niewygodny sposób i obejmuje naprawdę dziwną obsadę, która po prostu myli rzeczy
— moopet
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.