it-swarm.com.de

Verhindern Sie, dass Benutzer ein Formular senden, indem Sie die Eingabetaste drücken

Ich habe eine Umfrage auf einer Website und es scheint einige Probleme mit dem Eingeben (ich weiß nicht warum) und dem versehentlichen Absenden der Umfrage (Formular) zu geben, ohne auf den Senden-Button zu klicken. Gibt es eine Möglichkeit, dies zu verhindern?

Ich verwende HTML, PHP 5.2.9 und jQuery für die Umfrage.

697
DForck42

Sie können eine Methode wie

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

Lesen Sie die Kommentare zum Originalbeitrag, um ihn benutzerfreundlicher zu gestalten und den Nutzern das Drücken zu ermöglichen Enter wenn sie alle Felder ausgefüllt haben:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

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

Geben Sie den Schlüssel nirgendwo ein

Wenn Ihr Formular kein _<textarea>_ enthält, fügen Sie Ihrem _<form>_ einfach Folgendes hinzu:

_<form ... onkeydown="return event.key != 'Enter';">
_

Oder mit jQuery:

_$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});
_

Dies führt dazu, dass jeder Tastendruck innerhalb des Formulars auf dem key überprüft wird. Wenn es nicht Enter ist, wird true zurückgegeben und alles wird wie gewohnt fortgesetzt. Wenn es sich um Enter handelt, wird false zurückgegeben und alles wird sofort beendet, sodass das Formular nicht gesendet wird.

Das Ereignis keydown ist dem Ereignis keyup vorzuziehen, da keyup zu spät ist, um das Senden von Formularen zu blockieren. In der Vergangenheit gab es auch keypress , dies ist jedoch ebenso veraltet wie KeyboardEvent.keyCode . Verwenden Sie stattdessen KeyboardEvent.key , wodurch der Name der gedrückten Taste zurückgegeben wird. Wenn Enter markiert ist, wird 13 (normale Eingabe) und 108 (Nummernblock-Eingabe) markiert.

Beachten Sie, dass $(window), wie in einigen anderen Antworten anstelle von $(document) vorgeschlagen, für keydown/keyup in IE <= 8 nicht funktioniert. Dies ist also keine gute Wahl, wenn Sie diese armen Benutzer abdecken möchten auch.

Eingabetaste nur in Textbereichen zulassen

Wenn Sie einen _<textarea>_ in Ihrem Formular haben (der natürlich die Eingabetaste akzeptieren sollte ), fügen Sie den Keydown-Handler zu jeder einzelnen Eingabe hinzu Element, das kein _<textarea>_ ist.

_<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...
_

Um das Boilerplate zu reduzieren, ist es besser, dies mit jQuery zu tun:

_$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});
_

Wenn an diese Eingabeelemente andere Ereignishandlerfunktionen angehängt sind, die Sie aus irgendeinem Grund auch bei der Eingabetaste aufrufen möchten, verhindern Sie nur das Standardverhalten des Ereignisses, anstatt false zurückzugeben, damit es ordnungsgemäß an andere Handler weitergegeben werden kann.

_$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});
_

Erlaube die Eingabe von Schlüsseln in Textfeldern und sende nur Buttons

Wenn Sie möchten, dass die Eingabetaste auch für die Senden-Schaltflächen _<input|button type="submit">_ verwendet wird, können Sie die Auswahl jederzeit wie folgt verfeinern.

_$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});
_

Beachten Sie, dass _input[type=text]_, wie in einigen anderen Antworten vorgeschlagen, diese HTML5-Nicht-Texteingaben nicht abdeckt, sodass dies kein guter Selektor ist.

554
BalusC

Ich musste alle drei Ereignisse im Zusammenhang mit dem Drücken von Tasten abfangen, um zu verhindern, dass das Formular gesendet wurde:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Sie können all dies zu einer kompakten Version von Nice kombinieren:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
64
Upgradingdave

Abschnitt 4.10.22.2 Implizite Einreichung der W3C HTML5-Spezifikation lautet:

Ein form Element Standardknopf ist der erste Submit-Knopf in Baumreihenfolge dessen Formulareigentümer ist das form Element.

Wenn der Benutzeragent die implizite Übermittlung eines Formulars durch den Benutzer unterstützt (z. B. bei einigen Plattformen, bei denen die Eingabetaste gedrückt wird, während ein Textfeld fokussiert ist, wird das Formular implizit übermittelt), gilt dies für ein Formular, dessen Standardschaltfläche) hat ein definiertes Aktivierungsverhalten muss den Benutzeragenten veranlassen synthetische Klickaktivierungsschritte auszuführen darauf Standardschaltfläche .

Hinweis: Wenn also die Standardschaltfläche deaktiviert ist, wird das Formular nicht gesendet, wenn ein solcher impliziter Übermittlungsmechanismus verwendet wird. (Eine Schaltfläche hat kein Aktivierungsverhalten wenn deaktiviert.)

Eine standardkonforme Methode zum Deaktivieren impliziter Übermittlungen des Formulars besteht daher darin, eine deaktivierte Übermittlungsschaltfläche als erste Übermittlungsschaltfläche in das Formular einzufügen:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Eine nette Eigenschaft dieses Ansatzes ist, dass es funktioniert ohne JavaScript; Unabhängig davon, ob JavaScript aktiviert ist oder nicht, ist ein standardkonformer Webbrowser erforderlich, um die implizite Übermittlung von Formularen zu verhindern.

52
Daniel Trebbien

Wenn Sie für die eigentliche Übermittlung ein Skript verwenden, können Sie dem onsubmit-Handler die Zeile "return false" wie folgt hinzufügen:

<form onsubmit="return false;">

Das Aufrufen von submit () in dem Formular von JavaScript wird das Ereignis nicht auslösen.

47
Tom Hubbard

Verwenden:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Diese Lösung funktioniert für alle Formulare auf einer Website (auch für mit Ajax eingefügte Formulare) und verhindert nur Enters in Eingabetexten. Legen Sie es in eine dokumentenfertige Funktion und vergessen Sie dieses Problem ein Leben lang.

22
Buzogany Laszlo

Anstatt zu verhindern, dass Benutzer drücken EnterDies kann unnatürlich erscheinen. Sie können das Formular unverändert lassen und eine zusätzliche clientseitige Validierung hinzufügen: Wenn die Umfrage nicht abgeschlossen ist, wird das Ergebnis nicht an den Server gesendet, und der Benutzer erhält eine nette Nachricht mit der Aufforderung, was zu erledigen ist Füllen sie das Formular aus. Wenn Sie jQuery verwenden, probieren Sie das Validierungs-Plugin aus:

http://docs.jquery.com/Plugins/Validation

Dies erfordert mehr Arbeit als das Fangen der Enter Taste, aber es wird sicherlich eine reichhaltigere Benutzererfahrung bieten.

20
bbmud

Ich kann noch keinen Kommentar abgeben, daher werde ich eine neue Antwort posten

Die akzeptierte Antwort ist in Ordnung, aber die Eingabe auf dem Nummernblock wurde nicht gestoppt. Zumindest in der aktuellen Version von Chrome. Ich musste die Keycode-Bedingung ändern, dann funktioniert es.

if(event.keyCode == 13 || event.keyCode == 169) {...}
18
sparklos

Eine nette einfache kleine jQuery-Lösung:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
17
Eonasdan

Es ist meine Lösung, um das Ziel zu erreichen, es ist sauber und effektiv.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});
12
Developer

Ein ganz anderer Ansatz:

  1. Der erste <button type="submit"> im Formular wird durch Drücken von aktiviert Enter.
  2. Dies gilt auch dann, wenn die Schaltfläche mit style="display:none; ausgeblendet ist.
  3. Das Skript für diese Schaltfläche kann false zurückgeben, wodurch der Übermittlungsprozess abgebrochen wird.
  4. Sie können noch einen <button type=submit> haben, um das Formular abzusenden. Geben Sie einfach true zurück, um die Übermittlung zu kaskadieren.
  5. Drücken Sie Enter Während der Fokus auf die Schaltfläche für das echte Senden gelegt ist, wird die Schaltfläche für das echte Senden aktiviert.
  6. Drücken Sie Enter inside <textarea> oder andere Formularsteuerelemente verhalten sich normal.
  7. Drücken Sie Enter In <input> Formularsteuerelementen wird der erste <button type=submit> ausgelöst, der false zurückgibt, und daher passiert nichts.

Somit:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>
10
Erics

Geben der Form eine Aktion von "Javascript: void (0);" scheint den Trick zu tun

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>
8
sidarcy
  1. Verwenden Sie type = "submit" nicht für Eingaben oder Schaltflächen.
  2. Verwenden Sie type = "button" und verwenden Sie js [Jquery/angular/etc], um das Formular an den Server zu senden.
6
Irfan Ashraf

Ich musste verhindern, dass nur bestimmte Eingaben gesendet wurden, also habe ich einen Klassenselektor verwendet, damit dies eine "globale" Funktion ist, wo immer ich sie brauche.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Und dieser jQuery-Code:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternativ, wenn die Tastendrücke nicht ausreicht:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Einige Notizen:

Hier können verschiedene gute Antworten abgeändert werden Enter Die Taste scheint in allen Browsern für keydown zu funktionieren. Für die Alternative habe ich bind() auf die Methode on() aktualisiert.

Ich bin ein großer Fan von Klassenselektoren, die alle Vor- und Nachteile und Leistungsdiskussionen abwägen. Meine Namenskonvention lautet 'idSomething', um anzuzeigen, dass jQuery es als ID verwendet, um es vom CSS-Stil zu trennen.

6
goodeye

Das Setzen eines Submit-Buttons könnte genügen. Fügen Sie einfach ein Skript zur Eingabe hinzu (type = button) oder fügen Sie eventListener hinzu, wenn Sie möchten, dass die Daten im Formular gesendet werden.

Benutze das lieber

<input type="button">

als dies zu verwenden

<input type="submit">
5
Jimwel Anobong

Sie können eine JavaScript-Methode erstellen, um zu überprüfen, ob die Enter Die Taste wurde gedrückt, und wenn ja, um die Übermittlung zu stoppen.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Rufen Sie das einfach bei der Submit-Methode auf.

5
Brandon

Ich denke, es ist mit allen Antworten gut abgedeckt, aber wenn Sie eine Schaltfläche mit einem JavaScript-Überprüfungscode verwenden, können Sie einfach den Tastendruck des Formulars für die Eingabetaste festlegen, um Ihre Übermittlung wie erwartet aufzurufen:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Der Onkeypress JS kann alles sein, was Sie tun müssen. Es ist kein größerer globaler Wandel erforderlich. Dies gilt insbesondere dann, wenn Sie nicht diejenige sind, die die App von Grund auf neu codiert, und die Website einer anderen Person repariert wurde, ohne sie zu zerreißen und erneut zu testen.

2
garlicman

Ich hatte ein ähnliches Problem, bei dem ich ein Raster mit "Ajax-Textfeldern" (Yii CGridView) und nur einer Schaltfläche zum Senden hatte. Jedes Mal, wenn ich eine Suche in einem Textfeld durchführte, drückte ich die Eingabetaste. Ich musste etwas mit der Schaltfläche tun, da dies die einzige gemeinsame Schaltfläche zwischen den Ansichten war (MVC-Muster). Alles was ich tun musste, war type="submit" zu entfernen und onclick="document.forms[0].submit() zu setzen

2
StackUnder

Hier gibt es bereits viele gute Antworten, ich möchte nur etwas aus der UX-Perspektive beitragen. Tastaturbefehle in Formularen sind sehr wichtig.

Die Frage ist, wie die Übermittlung bei Tastendruck Enter deaktiviert werden kann. Nicht, wie man Enter in einer gesamten Anwendung ignoriert. Erwägen Sie daher, den Handler an ein Formularelement und nicht an das Fenster anzuhängen.

Das Deaktivieren von Enter für die Formularübermittlung sollte weiterhin Folgendes ermöglichen:

  1. Formularübermittlung über Enter, wenn die Übermittlungstaste aktiviert ist.
  2. Formularübermittlung, wenn alle Felder ausgefüllt sind.
  3. Interaktion mit nicht gesendeten Schaltflächen über Enter.

Dies ist nur Boilerplate, aber es folgt allen drei Bedingungen.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});
1
Solvitieg

NUR BLOCK SENDEN, aber keine andere wichtige Funktion der Eingabetaste, z. B. das Erstellen eines neuen Absatzes in einem <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>
1
mate.gwozdz

Das funktioniert bei mir

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});
0
Pjl

Ich möchte einen kleinen CoffeeScript-Code hinzufügen (nicht vor Ort getestet):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Ich hoffe, Ihnen gefällt der Nice-Trick in der except-Klausel.)

0
edx

Etwas, was ich hier nicht beantwortet gesehen habe: Wenn Sie durch die Elemente auf der Seite blättern, drücken Sie Enter Wenn Sie zur Schaltfläche "Senden" gelangen, wird der Onsubmit-Handler im Formular ausgelöst, das Ereignis wird jedoch als MouseEvent aufgezeichnet. Hier ist meine kurze Lösung, um die meisten Grundlagen abzudecken:

Dies ist keine jQuery-bezogene Antwort

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

So finden Sie ein funktionierendes Beispiel: https://jsfiddle.net/nemesarial/6rhogva2/

0
Nemesarial

Gehen Sie in Ihre CSS-Datei und fügen Sie diese hinzu. Die Übermittlung Ihres Formulars wird dann automatisch blockiert, solange Sie Eingaben übermittelt haben, wenn Sie diese nicht mehr benötigen. Sie können sie löschen oder stattdessen activate und deactivate eingeben

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }
0
Lars Gross

In meinem speziellen Fall musste ich die EINGABETASTE vom Absenden des Formulars abhalten und auch das Klicken auf die Schaltfläche "Absenden" simulieren. Dies liegt daran, dass die Schaltfläche "Senden" einen Klick-Handler enthielt, da wir uns in einem modalen Fenster befanden (vererbter alter Code). In jedem Fall ist hier meine Combo-Lösungen für diesen Fall.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Dieser Anwendungsfall ist besonders nützlich für Benutzer, die mit IE8 arbeiten.

0
Stone