Jak zapobiec naciśnięciu klawisza ENTER, aby przesłać formularz internetowy?

Jak zapobiegać ENTERprzesyłaniu formularza przez naciśnięcie klawisza w aplikacji internetowej?

[ wersja 2012, brak wbudowanego modułu obsługi, zachowaj obsługę pól tekstowych]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Teraz możesz zdefiniować moduł obsługi klawiszy w formularzu:
<form [...] onkeypress = "return checkEnter (event)">

document.querySelector('form').onkeypress = checkEnter;

Oto moduł obsługi jQuery, którego można użyć do zatrzymania wprowadzania wpisów, a także do zatrzymania klawisza Backspace -> wstecz. Pary (keyCode: selectorString) w obiekcie „keyStop” służą do dopasowania węzłów, które nie powinny uruchamiać domyślnej akcji.

Pamiętaj, że internet powinien być dostępnym miejscem, a to łamie oczekiwania użytkowników klawiatury. To powiedziawszy, w moim przypadku aplikacja internetowa, nad którą pracuję, i tak nie lubi przycisku Wstecz, więc wyłączenie skrótu klawiszowego jest OK. Dyskusja „powinien wejść -> prześlij” jest ważna, ale nie jest związana z faktycznie zadanym pytaniem.

Oto kod, który możesz pomyśleć o dostępności i dlaczego tak naprawdę chcesz to zrobić!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Po prostu zwróć false z modułu obsługi onsubmit

<form onsubmit="return false;">

lub jeśli chcesz obsługiwać w środku

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Będziesz musiał wywołać tę funkcję, która po prostu anuluje domyślne zachowanie formularza podczas przesyłania. Możesz dołączyć go do dowolnego pola wejściowego lub zdarzenia.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

Klawisz ENTER aktywuje jedynie domyślny przycisk przesyłania formularza, który będzie pierwszy

<input type="submit" />

przeglądarka znajdzie w formularzu.

Dlatego nie mam przycisku wysyłania, ale coś podobnego

<input type="button" value="Submit" onclick="submitform()" /> 

EDYTOWAĆ : W odpowiedzi na dyskusję w komentarzach:

Nie działa to, jeśli masz tylko jedno pole tekstowe - ale w takim przypadku może to być pożądane zachowanie.

Innym problemem jest to, że polega on na JavaScript do przesłania formularza. Może to stanowić problem z punktu widzenia dostępności. Można to rozwiązać, pisząc za <input type='button'/>pomocą javascript, a następnie wstawiając w <input type='submit' />ciągu<noscript> tagu. Wadą tego podejścia jest to, że w przeglądarkach z wyłączoną obsługą javascript będziesz mieć przesyłane formularze na ENTER. Od OP zależy, jakie zachowanie będzie pożądane w tym przypadku.

Nie znam żadnego sposobu, aby to zrobić bez inwokowania javascript.

Krótko mówiąc w czystym JavaScript jest:

<script type="text/javascript">
    window.addEventListener('keydown', function(e) {
        if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
            if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
                e.preventDefault();
                return false;
            }
        }
    }, true);
</script>

Wyłącza to tylko naciśnięcie klawisza „Enter” dla typu wprowadzania = „tekst”. Użytkownicy mogą nadal korzystać z klawisza „Enter” w całej witrynie.

Jeśli chcesz wyłączyć „Enter” także dla innych działań, możesz dodać console.log (e); dla celów testowych i wciśnij F12 w chrome, przejdź do zakładki „konsola” i wciśnij „backspace” na stronie i zajrzyj do środka, aby zobaczyć, jakie wartości są zwracane, a następnie możesz kierować wszystkie te parametry, aby dodatkowo ulepszyć kod powyżej, aby spełnić Twoje potrzeby dotyczące „e.target.nodeName” , „e.target.type” i wielu innych ...

Zobacz moją szczegółową odpowiedź na podobne pytanie tutaj

Wszystkie odpowiedzi, które znalazłem na ten temat, tutaj lub w innych postach, mają jedną wadę, to znaczy, że zapobiegają również faktycznemu wyzwalaniu zmian w elemencie formularza. Więc jeśli uruchomisz te rozwiązania, zdarzenie onchange również nie zostanie wyzwolone. Aby rozwiązać ten problem, zmodyfikowałem te kody i opracowałem dla siebie następujący kod. Mam nadzieję, że stanie się to przydatne dla innych. Dałem klasę do mojego formularza „prevent_auto_submit” i dodałem następujący JavaScript:

$(document).ready(function() 
{
    $('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event) 
    { 
        if (event.keyCode == 13)
        {
            event.preventDefault();
            $(this).trigger("change");
        }
    });
});

W przeszłości zawsze robiłem to z obsługą klawiszy, jak wyżej, ale dziś wpadłem na prostsze rozwiązanie. Klawisz Enter uruchamia tylko pierwszy nie wyłączony przycisk przesyłania w formularzu, więc właściwie wszystko, co jest wymagane, to przechwycenie tego przycisku podczas próby przesłania:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

Otóż ​​to. Naciskanie klawiszy będzie obsługiwane jak zwykle przez przeglądarkę / pola / itp. Jeśli zostanie uruchomiona logika Enter-Submit, przeglądarka znajdzie ukryty przycisk Wyślij i uruchomi go. Program obsługi javascript zapobiegnie następnie przesłaniu.

Spędziłem trochę czasu, tworząc tę ​​przeglądarkę dla IE8,9,10, Opera 9+, Firefox 23, Safari (PC) i Safari (MAC)

Przykład JSFiddle: http://jsfiddle.net/greatbigmassive/ZyeHe/

Kod podstawowy - wywołaj tę funkcję poprzez „onkeypress” dołączony do formularza i przekaż do niego „window.event”.

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

Następnie w formularzu:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

Jednak byłoby lepiej, gdybyś nie używał natrętnego JavaScript.

W moim przypadku ten jQuery JavaScript rozwiązał problem

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}

Zapobieganie przesłaniu formularza przez „ENTER” może powodować niedogodności dla niektórych użytkowników. Byłoby lepiej, jeśli wykonasz poniższą procedurę:

Napisz zdarzenie „onSubmit” w tagu formularza:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

napisz funkcję JavaScript w następujący sposób:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

Niezależnie od przyczyny, jeśli chcesz uniemożliwić przesłanie formularza po naciśnięciu klawisza Enter, możesz napisać następującą funkcję w javascript:

    $(document).ready(function() {
          $(window).keydown(function(event){
          if(event.keyCode == 13) {
               event.preventDefault();
               return false;
              }
           });
         });

dzięki.

Dodaj ten tag do formularza - onsubmit="return false;" wtedy możesz przesłać formularz tylko za pomocą funkcji JavaScript.

Aby zapobiec przesyłania formularza po naciśnięciu enterw sposób textarealub inputzakresie, sprawdzić przedstawić zdarzenie, aby znaleźć to rodzaj elementu wysłał zdarzenie.

Przykład 1

HTML

<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.type!=="submit") {
        e.preventDefault();
    }
});

Lepszym rozwiązaniem jest, jeśli nie masz przycisku wysyłania i odpalasz wydarzenie zwykłym przyciskiem. Jest lepiej, ponieważ w pierwszym przykładzie uruchamiane są 2 zdarzenia wysyłania, ale w drugim przykładzie uruchamiane jest tylko 1 zdarzenie wysyłania.

Przykład 2

HTML

<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>

jQuery

$(document).on('submit', 'form', function(e) {
    if (e.delegateTarget.activeElement.localName!=="button") {
        e.preventDefault();
    }
});

Przekonasz się, że jest to prostsze i przydatne: D

$(document).on('submit', 'form', function(e){
    /* on form submit find the trigger */
    if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
        /* if the trigger is not between selectors list, return super false */
        e.preventDefault();
        return false;
    } 
});

Co powiesz na:

<asp:Button ID="button" UseSubmitBehavior="false"/>

Sprawdź ten artykuł Jak zapobiec naciśnięciu klawisza ENTER w celu przesłania formularza internetowego?

$(“.pc_prevent_submit”).ready(function() {
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
  <input type=”text” name=”username”>
  <input type=”password” name=”userpassword”>
  <input type=”submit” value=”submit”>
</form>

Myślę, że możesz uwięzić keydown na formularzu w javascript i zapobiec nawet bulgotaniu. ENTER na stronie internetowej po prostu przesyła formularz, w którym znajduje się obecnie wybrany element sterujący.

Ten link zapewnia rozwiązanie, które działało dla mnie w Chrome, FF i IE9 oraz emulator dla IE7 i 8, który jest dostarczany z narzędziem programistycznym IE9 (F12).

http://webcheatsheet.com/javascript/disable_enter_key.php

Innym podejściem jest dodanie przycisku wprowadzania danych do formularza tylko wtedy, gdy ma zostać przesłany, i zastąpienie go zwykłym div podczas wypełniania formularza

Po prostu dodaj ten atrybut do tagu FORM:

onsubmit="return gbCanSubmit;"

Następnie w tagu SCRIPT dodaj to:

var gbCanSubmit = false;

Następnie, kiedy tworzysz przycisk lub z innego powodu (np. W funkcji), w końcu zezwalasz na przesłanie, po prostu odwróć globalną wartość logiczną i wykonaj wywołanie .submit (), podobnie jak w tym przykładzie:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}

Natknąłem się na to sam, ponieważ mam wiele przycisków przesyłania z różnymi wartościami „nazwa”, więc po przesłaniu robią różne rzeczy na tym samym pliku php. Przycisk enter/ returnpsuje to, ponieważ te wartości nie zostały przesłane. Zastanawiałem się więc, czy przycisk enter/ returnaktywuje pierwszy przycisk przesyłania w formularzu? W ten sposób możesz mieć przycisk przesyłania „waniliowy”, który jest albo ukryty, albo ma wartość „nazwa”, która zwraca wykonywany plik php z powrotem na stronę z formularzem. Albo też domyślna (ukryta) wartość „nazwa”, którą aktywuje naciśnięcie klawisza, a przyciski wysyłania zastępują własne wartości „nazwa”. Tylko myśl.

Co powiesz na:

<script>
function isok(e) {
  var name = e.explicitOriginalTarget.name;
  if (name == "button") {
    return true
  }
  return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>

I po prostu nazwij swój przycisk w prawo, a on nadal będzie się przesyłać, ale pola tekstowe, tj. WyraźnyOriginalTarget po wciśnięciu return w jednym, nie będą miały właściwej nazwy.

To zadziałało dla mnie.
onkeydown = "return! (event.keyCode == 13)"

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

Oto jak bym to zrobił:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter")
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
}

umieścić w zewnętrznym pliku javascript

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

lub gdzieś wewnątrz tagu ciała

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Miałem ten sam problem (formularze z mnóstwem pól tekstowych i niewykwalifikowani użytkownicy).

Rozwiązałem to w ten sposób:

function chkSubmit() {
    if (window.confirm('Do you want to store the data?')) {
        return true;
    } else {
        // some code to focus on a specific field
        return false;
    }
}

używając tego w kodzie HTML:

<form
    action="go.php" 
    method="post"
    accept-charset="utf-8"  
    enctype="multipart/form-data"
    onsubmit="return chkSubmit()"
>

W ten sposób ENTERklucz działa zgodnie z planem, ale z potwierdzeniem (sekundaENTER wymagane jest zwykle kliknięcie).

Pozostawiam czytelnikom poszukiwanie skryptu wysyłającego użytkownika w pole, w którym nacisnął, ENTERjeśli zdecyduje się pozostać na formularzu.