Verhindern, dass Benutzer ein Formular abgeschickt von Enter drücken

Question

Ich habe eine Umfrage auf einer Website, und es scheint einige Probleme, die mit dem Benutzer eingeben schlagen (ich weiß nicht, warum) und versehentlich die Erhebung (Formular) einreichen, ohne den Absenden-Button klicken. Gibt es eine Möglichkeit, dies zu verhindern?

Ich bin mit HTML, PHP 5.2.9 und jQuery auf der Umfrage.

Answer 1

Sie können eine Methode wie

verwenden

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

die Kommentare auf der ursprünglichen Nachricht Beim Lesen, um es besser benutzbar und damit die Menschen drücken Enter , wenn sie alle Felder ausgefüllt:

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

Answer 2

Disallow Enter-Taste irgendwo

Wenn Sie nicht über eine <textarea> in Ihrem Formular haben, dann fügen Sie einfach die folgende in der <form>:

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

oder mit jQuery:

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

Dies wird dazu führen, dass jeder Tastendruck in dem Formular auf der key geprüft werden. Wenn es nicht Enter wird, dann wird es zurückgeben true und alles wie gewohnt weiter. Wenn es Enter ist, dann wird es false und alles sofort wieder aufhören, so wird das Formular nicht eingereicht werden.

Das keydown Ereignis wird bevorzugt über keyup als keyup ist zu spät Formular zu blockieren. Historisch gesehen war es auch die keypress , aber dies ist veraltet , ebenso wie der KeyboardEvent.keyCode . Sie sollten KeyboardEvent.key statt, die den Namen des zurück Taste gedrückt wird. Wenn Enter aktiviert ist, dann würde dies überprüfen 13 (normal eingeben) sowie 108 (Numpad eingeben).

Beachten Sie, dass $(window) wie in einigen anderen Antworten statt $(document) vorgeschlagen funktioniert nicht für keydown / keyup in IE <= 8, das ist so nicht eine gute Wahl, wenn Sie sind wie auch die armen Nutzer zu decken.

Lassen Sie Enter-Taste auf Textbereiche nur

Wenn Sie eine <textarea> in Ihrem Formular haben (was natürlich sollte akzeptieren Sie die Enter-Taste), dann fügen Sie die keydown Handler für jeden einzelnen Eingangselement, das kein <textarea> ist.

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

Um vorformulierten zu reduzieren, ist dies besser mit jQuery zu tun:

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

Wenn Sie andere Funktionen Event-Handler auf diesen Eingabeelementen angebracht, die Sie auch Schlüssel aus irgendeinem Grund auf Eingabe aufrufen möchten, dann nur Ereignis Standardverhalten zu verhindern, anstatt falsche zurückzukehren, so kann es zu anderen Handler richtig ausbreiten .

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

Zulassen Taste auf Textfelder eingeben und Senden-Schaltflächen nur

Wenn Sie möchten, dass Schlüssel ermöglichen geben auf Tasten einreichen <input|button type="submit">, dann können Sie immer den Wähler verfeinern, wie unten.

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

, dass input[type=text] Hinweis wie in einigen anderen Antworten vorgeschlagen nicht jene HTML5 Nicht-Texteingaben decken, so dass kein guter Selektor.

Answer 3

Ich hatte alle drei Ereignisse fangen im Zusammenhang mit den Tasten, um aus der Form zu verhindern vorgelegt werden:

    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 alle vereinen, die oben in eine schöne kompakte Version:

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

Answer 4

Abschnitt 4.10.22.2 Implizite Vorlage der W3C HTML5-Spezifikation sagt:

  

form Element Standardschaltfläche ist die erste Seite Submit-Button in Baum um deren Form Eigentümer ist, dass form Element.

     

Wenn der User-Agent lassen unterstützt die Benutzer ein Formular implizit vorlegen (zum Beispiel auf einigen Plattformen schlagen die „Enter“ -Taste, während ein Textfeld implizit fokussiert das Formular abschickt), dann tun so für eine Form, deren Standardschaltfläche eine definierte Aktivierungsverhalten muss den User-Agent auf laufen synthetischen Klick Aktivierungsschritte auf dieser Standardschaltfläche .

     

    

Hinweis: Wenn also die Standardschaltfläche deaktiviert ist, wird das Formular nicht eingereicht, wenn eine solche implizite Einreichung Mechanismus verwendet wird. (A-Taste hat keine Aktivierungsverhalten wenn deaktiviert.)

  

Daher ist eine standardkonforme Art und Weise jede implizite Einreichung des Formulars zu deaktivieren, ist eine Schaltfläche deaktiviert vorlegen zu platzieren als die erste Schaltfläche in Form einreichen:

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

Ein nettes Feature dieses Ansatzes ist, dass es funktioniert ohne JavaScript ; ob oder ob nicht JavaScript aktiviert ist, wird ein standardkonforme Web-Browser erforderlich implizite Formularübermittlung zu verhindern.

Answer 5

Wenn Sie ein Skript verwenden, die tatsächliche einreichen zu tun, dann können Sie hinzufügen „return false“ Linie zum onsubmit Handler wie folgt aus:

<form onsubmit="return false;">

Calling () auf dem Formular von JavaScript vorlegen wird nicht das Ereignis auslösen.

Answer 6

Verwendung:

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

Diese Lösung auf alle Formulare auf einer Webseite funktioniert (auch auf Formulare mit Ajax eingefügt), Verhinderung von nur Enter s in Eingabetexte. Legen Sie sie in einem Dokument-Ready-Funktion, und vergessen, dieses Problem für ein Leben.

Answer 7

Stattdessen Benutzer daran zu hindern, mit Enter , die unnatürlich erscheinen mag, können Sie das Formular lassen wie es ist und einige zusätzliche clientseitige Validierung hinzu: Wenn die Umfrage das Ergebnis nicht abgeschlossen ist, wird nicht gesendet auf den Server und den Benutzer erhält eine nette Nachricht zu sagen, was fertig werden muss, um das Formular auszufüllen. Wenn Sie jQuery verwenden, versuchen Sie die Validation-Plugin:

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

Dies wird mehr Arbeit erfordern, als fangen die Enter Taste, aber sicher wird es eine höhere Benutzerfreundlichkeit bieten.

Answer 8

Ich kann noch nicht kommentieren, so dass ich eine neue Antwort schreiben

akzeptierte Antwort ist ok-ish, aber es war zu stoppen Numpad nicht vorlegen eingeben. Zumindest in der aktuellen Version von Chrome. Ich hatte den keycode Zustand, dies zu ändern, dann funktioniert es.

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

Answer 9

Eine nette einfache kleine jQuery Lösung:

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

Answer 10

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

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

Answer 11

Ein völlig anderer Ansatz:

1. Der erste <button type="submit"> in Form wird auf der Taste Enter aktiviert werden.
2. Dies gilt auch, wenn Sie die Taste mit style="display:none; versteckt
3. Das Skript für diese Schaltfläche kann false zurückkehren, die die Vorlage Prozess abgebrochen wird.
4. Sie können noch eine weitere <button type=submit> müssen das Formular abzuschicken. Nur true Rückkehr die Vorlage kaskadieren.
5. Durch Drücken von Enter , während die realen Submit-Button fokussiert wird den realen Submit-Button aktiviert.
6. Durch Drücken von Enter innerhalb <textarea> oder eine andere Form Kontrollen normal verhalten wird.
7. Durch Drücken von Enter innen <input> Formular-Steuerelemente wird den ersten <button type=submit> auslösen, die false zurückkehrt, und damit nichts passiert.

So:

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

Answer 12

Geben Sie die 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>

Answer 13

Ich brauchte nur bestimmte Eingaben von der Abgabe zu verhindern, so habe ich eine Klassenauswahl, dies ist eine „global“ sein lassen Funktion, wo ich es brauche.

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

Und der jQuery-Code:

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

Wenn alternativ keydown reicht nicht aus:

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

Einige Hinweise:

Ändern verschiedene gute Antworten hier, die Enter Schlüssel scheint für keydown auf allen Browsern zu funktionieren. Für die Alternative, ich bind() zur on() Methode aktualisiert.

Ich bin ein großer Fan von Klasse Selektoren Abwägung aller Vor- und Nachteile und Performance Diskussionen. Meine Namenskonvention ist ‚idSomething‘ jQuery, um anzuzeigen, indem es als id, es von CSS-Styling zu trennen.

Answer 14

1. Verwenden Sie keine type = "submit" für Ein- oder Tasten.
2. Mit type = "button" und verwenden js [Jquery / Winkel / etc] Formular-Server zu senden.

Answer 15

Sie könnten eine JavaScript-Methode machen zu überprüfen, um zu sehen, ob die Enter -Taste getroffen wurde, und wenn ja, auf das Absenden zu stoppen.

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

Rufen Sie einfach, dass auf dem einreichen Verfahren.

Answer 16

setzt keine Submit-Button tun könnte. Legen Sie einfach ein Skript mit dem Eingang (type = Taste) oder eventlistener hinzufügen, wenn Sie es, die Daten in Form einreichen möchten.

Rather diese verwenden

<input type="button">

als dies mit

<input type="submit">

Answer 17

Ich hatte ein ähnliches Problem, wo ich mit „Ajax-Textfeldern“ ein Raster hatte (Yü CGridView) und eine nur Submit-Button. Jedes Mal habe ich eine Suche auf einem Textfeld und drücken eingereicht das Formular eingeben. Ich hatte etwas mit der Taste zu tun, weil es die einzige gemeinsame Taste zwischen den Ansichten (MVC-Muster) war. Alles, was ich tun musste, war type="submit" zu entfernen und setzte onclick="document.forms[0].submit()

Answer 18

Ich denke, es ist gut mit allen Antworten abgedeckt, aber wenn Sie auf eine Schaltfläche mit einigen JavaScript Validierungscode verwenden setzen Sie könnten nur die onkeypress des Formulars für Geben Sie Ihre einreichen wie erwartet zu nennen:

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

Die onkeypress JS könnte sein, was Sie tun müssen. Es gibt keine Notwendigkeit für eine größere, globale Veränderungen. Dies gilt insbesondere, wenn Sie nicht derjenige sind Codierung die App von Grunde auf neu, und Sie haben in Verlegenheit jemand anderer Website gebracht worden, ohne es zu zerreißen und wieder testet es.

Answer 19

Es gibt viele gute Antworten hier schon, ich will nur etwas von einer UX Perspektive beizutragen. Tastatursteuerung in Formen sind sehr wichtig.

Die Frage ist, wie von der Einreichung auf keypress Enter zu deaktivieren. Nicht wie Enter in einer gesamten Anwendung zu ignorieren. So betrachtet die Prozedur zu einem Formularelement angebracht wird, nicht das Fenster.

Die Deaktivierung Enter für Formularübermittlung sollte noch folgendes zulassen:

1. Formular Vorlage über Enter wenn Submit-Button fokussiert ist.
2. Formular-Vorlagen, wenn alle Felder ausgefüllt.
3. Die Interaktion mit Nicht-Senden-Schaltflächen über Enter.

Dies ist nur vorformulierten aber es folgt alle 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;
  }
});

Answer 20

NUR BLOCK Zustellen nicht aber andere, wichtige Funktionalität von Enter-Taste, wie einen neuen Absatz in einem <textarea> erstellen:

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 21

In meinem speziellen Fall musste ich von Absenden des Formulars ENTER stoppen und simulieren auch das Klicken der Schaltfläche einreichen. Dies liegt daran, der Submit-Button auf einen Click-Handler hatte, weil wir in einem modalen Fenster (geerbt alter Code) waren. 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 Menschen mit IE8 arbeiten.

Answer 22

Dies funktioniert für mich

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

Answer 23

Etwas habe ich hier nicht beantwortet gesehen: wenn Sie mit der Tabulatortaste durch die Elemente auf der Seite, mit Enter , wenn Sie auf die Absenden-Button erhalten die onsubmit Handler auf dem Formular auslösen, aber es wird aufgezeichnet das Ereignis als Mouseevent. Hier ist meine kurze Lösung der meisten Basen abdecken:

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

ein Arbeitsbeispiel zu finden: https://jsfiddle.net/nemesarial/6rhogva2/

Answer 24

Ich möchte einen kleinen Coffeescript-Code hinzufügen (nicht getestet Feld):

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

(Ich hoffe, Sie wie ein netter Trick in der es sei denn Klausel.)

Answer 25

Gehen Sie in Ihrem CSS und fügen hinzu, dass es wird dann automatisch die Vorlage Ihres formular blockieren, solange Sie Eingabe einreichen, wenn Sie nicht mehr möchten, können Sie es oder geben activate und deactivate löschen statt

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

Answer 26

Mit Javascript (ohne jedes Eingabefeld Prüfung):

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

Wenn jemand will, dies in speziellen Bereichen anzuwenden, beispielsweise Eingabetyp Text:

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

Das funktioniert gut in meinem Fall.

Answer 27

Das hat für mich in allen Browsern nach viel Frustration mit anderen Lösungen gearbeitet. Die name_space äußere Funktion ist nur fern zu bleiben erklärte Globals, etwas, das ich auch empfehlen.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Proben Verwendung:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Answer 28

Verwendung:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

Answer 29

In meinem Fall hatte ich ein paar jQuery UI zum automatischen Vervollständigung Felder und Textfelder in einem Formular , so wollte ich sie auf jeden Fall Enter akzeptieren. So entfernte ich die type="submit" Eingabe von einer Form und hinzugefügt, anstatt einen Anker <a href="" id="btn">Ok</a>. Dann redete ich es als Button und fügte den folgenden Code:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Wenn ein Benutzer alle erforderlichen Felder füllt, validateData() gelingt und das Formular abschickt.