Benutzer daran hindern, ein Formular durch Drücken der Eingabetaste abzuschicken

Question

Ich habe eine Umfrage auf einer Website, und es scheint einige Probleme mit den Benutzern zu geben, die die Eingabetaste drücken (ich weiß nicht, warum) und versehentlich die Umfrage (das Formular) abschicken, ohne auf die Schaltfläche "Abschicken" zu klicken. Gibt es eine Möglichkeit, dies zu verhindern?

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

Answer 1

Ich habe diesen Code verwendet, um das Drücken der ENTER-Taste sowohl bei der Eingabeart [Text] als auch bei der Eingabeart [Passwort] zu deaktivieren. Sie können auch andere Eingaben hinzufügen, wie z. B. die Eingabeart [E-Mail], oder Sie können auch Ihre gewünschte Eingabeart anwenden.

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

Answer 2

NUR BLOCK SUBMIT, nicht aber andere wichtige Funktionen der Eingabetaste, wie das Erstellen eines neuen Absatzes in einer <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>

Answer 3

$(document).on("keydown","form", function(event)
{
   node = event.target.nodeName.toLowerCase();
   type = $(event.target).prop('type').toLowerCase();

   if(node!='textarea' && type!='submit' && (event.keyCode == 13 || event.keyCode == 169))
   {
        event.preventDefault();
        return false;
    }
});

Es funktioniert perfekt!

Answer 4

Wenn Sie Vue verwenden, verwenden Sie den folgenden Code, um zu verhindern, dass Benutzer das Formular durch Drücken von Enter :

<form @submit.prevent>...</form>

Answer 5

Ich denke, es ist gut mit allen Antworten abgedeckt, aber wenn Sie eine Schaltfläche mit einigen JavaScript-Validierung-Code verwenden, könnten Sie nur das Formular onkeypress für Enter, um Ihre submit wie erwartet aufrufen:

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

Die onkeypress JS könnte alles sein, was Sie tun müssen. Es besteht keine Notwendigkeit für eine größere, globale Änderung. Das gilt vor allem dann, wenn Sie die Anwendung nicht von Grund auf neu programmieren, sondern die Website einer anderen Person reparieren sollen, ohne sie zu zerlegen und erneut zu testen.