Wie kann verhindert werden, dass die EINGABETASTE gedrückt wird, um ein Webformular zu senden?

Wie verhindern Sie, dass ein ENTERTastendruck ein Formular in einer webbasierten Anwendung sendet?

[ Revision 2012, kein Inline-Handler, Textbereich beibehalten, Handhabung eingeben]

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

Jetzt können Sie einen Tastendruck-Handler im Formular definieren:
<form [...] onkeypress = "return checkEnter (event)">

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

Hier ist ein jQuery-Handler, mit dem Sie die Eingabe von Eingaben stoppen und die Rücktaste -> zurück stoppen können. Die Paare (keyCode: selectorString) im Objekt "keyStop" werden verwendet, um Knoten zuzuordnen, die ihre Standardaktion nicht auslösen sollen.

Denken Sie daran, dass das Web ein zugänglicher Ort sein sollte, was die Erwartungen der Tastaturbenutzer verletzt. In meinem Fall mag die Webanwendung, an der ich arbeite, die Schaltfläche "Zurück" ohnehin nicht. Daher ist das Deaktivieren der Tastenkombination in Ordnung. Die Diskussion "sollte eintreten -> einreichen" ist wichtig, bezieht sich jedoch nicht auf die tatsächlich gestellte Frage.

Hier ist der Code, über den Sie nachdenken können, warum Sie dies tatsächlich tun möchten!

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

Geben Sie einfach false vom onsubmit-Handler zurück

<form onsubmit="return false;">

oder wenn Sie einen Handler in der Mitte wollen

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

Sie müssen diese Funktion aufrufen, die nur das Standardübermittlungsverhalten des Formulars abbricht. Sie können es an jedes Eingabefeld oder Ereignis anhängen.

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

Die EINGABETASTE aktiviert lediglich die Standard-Senden-Schaltfläche des Formulars, die die erste sein wird

<input type="submit" />

Der Browser findet innerhalb des Formulars.

Deshalb habe ich keinen Submit-Button, sondern so etwas

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

BEARBEITEN : Als Antwort auf die Diskussion in Kommentaren:

Dies funktioniert nicht, wenn Sie nur ein Textfeld haben - aber es kann sein, dass dies in diesem Fall das gewünschte Verhalten ist.

Das andere Problem ist, dass dies auf Javascript beruht, um das Formular einzureichen. Dies kann aus Sicht der Barrierefreiheit ein Problem sein. Dies kann gelöst werden, indem Sie das <input type='button'/>mit Javascript schreiben und dann ein <input type='submit' />in a setzen<noscript> Tag einfügen. Der Nachteil dieses Ansatzes besteht darin, dass Sie bei Browsern mit Javascript-Deaktivierung bei ENTER Formulare senden müssen. Es ist Sache des OP, zu entscheiden, was in diesem Fall das gewünschte Verhalten ist.

Ich kenne keine Möglichkeit, dies zu tun, ohne Javascript aufzurufen.

Kurz gesagt lautet die Antwort in reinem Javascript:

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

Dies deaktiviert nur die Tastendruckaktion "Enter" für den Eingabetyp = "Text". Besucher können weiterhin die Eingabetaste auf der gesamten Website verwenden.

Wenn Sie die Eingabetaste auch für andere Aktionen deaktivieren möchten, können Sie console.log (e) hinzufügen. Für Ihre Testzwecke und drücken Sie F12 in Chrome, gehen Sie zur Registerkarte "Konsole" und klicken Sie auf "Rücktaste" auf der Seite und schauen Sie hinein, um zu sehen, welche Werte zurückgegeben werden. Dann können Sie alle diese Parameter als Ziel festlegen, um den Code weiter zu verbessern oben, um Ihren Anforderungen für "e.target.nodeName" , "e.target.type" und viele mehr zu entsprechen ...

Siehe meine ausführliche Antwort auf eine ähnliche Frage hier

Alle Antworten, die ich zu diesem Thema hier oder in anderen Beiträgen gefunden habe, haben einen Nachteil, nämlich, dass der eigentliche Änderungsauslöser auch für das Formularelement verhindert wird. Wenn Sie diese Lösungen ausführen, wird das Änderungsereignis ebenfalls nicht ausgelöst. Um dieses Problem zu lösen, habe ich diese Codes geändert und den folgenden Code für mich entwickelt. Ich hoffe, dass dies für andere nützlich wird. Ich habe meinem Formular "Prevent_auto_submit" eine Klasse gegeben und das folgende JavaScript hinzugefügt:

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

Ich habe es in der Vergangenheit immer mit einem Tastendruck-Handler wie dem oben genannten gemacht, aber heute habe ich eine einfachere Lösung gefunden. Die Eingabetaste löst nur die erste nicht deaktivierte Senden-Schaltfläche im Formular aus. Alles, was erforderlich ist, ist, diese Schaltfläche abzufangen, die versucht, sie zu senden:

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

Das ist es. Tastendrücke werden wie gewohnt vom Browser / Felder / usw. behandelt. Wenn die Enter-Submit-Logik ausgelöst wird, findet der Browser diese versteckte Senden-Schaltfläche und löst sie aus. Und der Javascript-Handler verhindert dann die Übermittlung.

Ich habe einige Zeit damit verbracht, diesen Cross-Browser für IE8,9,10, Opera 9+, Firefox 23, Safari (PC) und Safari (MAC) zu erstellen.

JSFiddle-Beispiel: http://jsfiddle.net/greatbigmassive/ZyeHe/

Basiscode - Rufen Sie diese Funktion über "onkeypress" auf, das an Ihr Formular angehängt ist, und übergeben Sie "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;
  }
}

Dann auf Ihrem Formular:

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

Es wäre jedoch besser, wenn Sie kein aufdringliches JavaScript verwenden würden.

In meinem Fall hat dieses jQuery-JavaScript das Problem gelöst

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

Das Verhindern, dass "ENTER" zum Senden eines Formulars verwendet wird, kann einige Ihrer Benutzer stören. Es ist also besser, wenn Sie die folgenden Schritte ausführen:

Schreiben Sie das Ereignis 'onSubmit' in Ihr Formular-Tag:

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

Schreiben Sie die Javascript-Funktion wie folgt:

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

     } 

     (OR)

Was auch immer der Grund sein mag, wenn Sie das Senden von Formularen durch Drücken der Eingabetaste verhindern möchten, können Sie die folgende Funktion in Javascript schreiben:

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

Vielen Dank.

Dieses Tag zu Ihrem Formular hinzufügen - onsubmit="return false;" Dann können Sie Ihr Formular nur mit einer JavaScript-Funktion senden.

Um zu verhindern, dass ein Formular gesendet wird , wenn Sie enterin ein textareaoder inputFeld drücken , überprüfen Sie das Senden-Ereignis, um festzustellen, welcher Elementtyp das Ereignis gesendet hat.

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

Eine bessere Lösung ist, wenn Sie keine Senden-Schaltfläche haben und das Ereignis mit einer normalen Schaltfläche auslösen. Es ist besser, weil im ersten Beispiel 2 Übermittlungsereignisse ausgelöst werden, im zweiten Beispiel jedoch nur 1 Übermittlungsereignis ausgelöst wird.

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

Sie finden dies einfacher und nützlicher: 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;
    } 
});

Wie wäre es mit:

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

Bitte überprüfen Sie diesen Artikel. Wie kann verhindert werden, dass die EINGABETASTE gedrückt wird, um ein Webformular zu senden?

$(“.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>

Sie können den Keydown in einem Formular in Javascript einfangen und das gleichmäßige Sprudeln verhindern, denke ich. ENTER auf einer Webseite sendet im Grunde nur das Formular, in dem sich das aktuell ausgewählte Steuerelement befindet.

Dieser Link bietet eine Lösung, die für mich in Chrome, FF und IE9 funktioniert hat, sowie den Emulator für IE7 und 8, der mit dem IE9-Entwicklertool (F12) geliefert wird.

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

Ein anderer Ansatz besteht darin, die Schaltfläche zum Senden der Eingabe nur dann an das Formular anzuhängen, wenn sie gesendet werden soll, und sie beim Ausfüllen des Formulars durch ein einfaches Div zu ersetzen

Fügen Sie einfach dieses Attribut zu Ihrem FORM-Tag hinzu:

onsubmit="return gbCanSubmit;"

Fügen Sie dann in Ihrem SCRIPT-Tag Folgendes hinzu:

var gbCanSubmit = false;

Wenn Sie dann eine Schaltfläche erstellen oder aus einem anderen Grund (wie in einer Funktion) eine Übermittlung zulassen, drehen Sie einfach den globalen Booleschen Wert um und führen Sie einen Aufruf von .submit () aus, ähnlich wie in diesem Beispiel:

function submitClick(){

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

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

}

Ich bin selbst darauf gestoßen, weil ich mehrere Submit-Buttons mit unterschiedlichen 'Name'-Werten habe, so dass sie beim Senden unterschiedliche Dinge in derselben PHP-Datei tun. Die Schaltfläche enter/ returnunterbricht dies, da diese Werte nicht übermittelt werden. Also dachte ich mir, aktiviert die Schaltfläche enter/ returndie erste Schaltfläche zum Senden im Formular? Auf diese Weise könnten Sie eine 'Vanilla'-Senden-Schaltfläche haben, die entweder ausgeblendet ist oder einen' Name'-Wert hat, der die ausführende PHP-Datei auf die Seite mit dem Formular zurückgibt. Oder ein standardmäßiger (versteckter) 'Name'-Wert, den der Tastendruck aktiviert, und die Senden-Schaltflächen werden mit ihren eigenen' Name'-Werten überschrieben. Nur ein Gedanke.

Wie wäre es mit:

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

Und benennen Sie einfach Ihre Schaltfläche richtig und sie wird weiterhin gesendet, aber Textfelder, dh das explizite Originalziel, wenn Sie in einem die Eingabetaste drücken, haben nicht den richtigen Namen.

Das hat bei mir funktioniert.
onkeydown = "return! (event.keyCode == 13)"

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

   </form>

So würde ich es machen:

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

in eine externe Javascript-Datei einfügen

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

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

oder irgendwo innerhalb des Body Tags

<script>


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

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

Ich hatte das gleiche Problem (Formulare mit Tonnen von Textfeldern und ungelernten Benutzern).

Ich habe es so gelöst:

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

Verwenden Sie dies im HTML-Code:

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

Auf diese Weise ENTERfunktioniert die Taste wie geplant, es ist jedoch eine Bestätigung ( ENTERnormalerweise ein zweites Tippen) erforderlich.

Ich überlasse den Lesern die Suche nach einem Skript, das den Benutzer in das Feld sendet, in dem er gedrückt hat, ENTERwenn er sich entscheidet, auf dem Formular zu bleiben.