Wie verhindert man Umleitungen, die beim Drücken der Eingabetaste in einem Eingabefeld auftreten?

Question

Ich habe ein Formular mit einer Eingabe für E-Mail.

Wenn die Taste gedrückt wird, bestätige ich mit einfachen Regex, dass es eine E-Mail-Adresse ist, und das funktioniert gut. wenn ich eingeben jedoch drücken (key=13), leitet sie an someother Seite und das ist der Fehler, den ich sehe:

Kann nicht POST/

ich dieses Skript gedacht würde das Problem umgehen, aber es didn 't:

handleChange = (event) => { 
    event.preventDefault(); 
    var keyCode = event.keyCode || event.which; 
    if (keyCode == '13'){ 
     console.log('enter pressed'); 
    } 
} 

Was ist los? Wie kann ich die Umleitung verhindern, die auftritt, wenn ich die Eingabetaste in einem Eingabefeld drücke? Kannst du mir bitte Helfen. Vielen Dank.

Answer 1

Versuchen Sie, die onKeyPress Event-Handling. Sie müssen return false, wenn die Eingabetaste in Ihrer handleChange Funktion gedrückt wird. Sie müssen den Rückgabewert in Ihrer handleChange Funktion in Ihrer Ereignisverbindung zurückgeben; so etwas wie

<input type="text" onKeyPress="return handleChange(event)" /> 

Insgesamt können Sie versuchen:

<form action="." method="post"> 
    <div id="email-wrapper"> 
     <input type="text" placeholder="Your email" name="email" ref="email" onKeyPress={return this.handleChange(event)}/> 
    </div> 
    <span class="signup-error">Please provide a valid email.</span> 
</form> 
.... 
.... 
<button id="next-btn" onClick={this.saveAndContinue}>Next</button> 

<script> 
    handleChange = (event) => { 
     event.preventDefault(); 
     var keyCode = event.keyCode || event.which; 
     if (keyCode == '13'){ 
      console.log('enter pressed'); 
      return false; 
     } 
    } 
</script> 

Answer 2

Dies liegt daran, dass die Aktionen im Formular ausgeführt werden, wenn Sie die Eingabetaste drücken. Sie müssen also die Aktion vom Formular abfangen und Standardeinstellungen verhindern.

können Sie den gleichen Event-Handler auf onsubmit des Formulars

<form action="." onsubmit={this.saveAndContinue} method="post"> 
.... 

Answer 3

First off Griff die Eingabefelder onkeypress wie so:

<input type="text" placeholder="Your email" name="email" ref="email" onkeypress="handleEnterKey(event)"/> 

Dann die Funktion handleEnterKey wie folgt erstellen:

function handleEnterKey(e){ 
    if(e.keyCode == 13){ // enter pressed 
     try{ 
      e.preventDefault ? e.preventDefault() : (e.returnValue = false); 

      //DO ALTERNATE ACTION RATHER THAN SEND ENTER 

     }catch(err){ 
      console.log(err.message); 
     } 
    } 
} 

Auch manchmal in älteren Versionen von Internet Explorer und Lesse r bekannte Browser die Event.preventDefault() nicht ausreichend sein, um den Schlüssel aus propogating Mutter eingeben zu stoppen, so können Sie alternativ verwenden:

event.stopPropagation(); 

Hoffnung, das hilft.

Answer 4

versuchen Sie return false; vor Ihren Funktionen in Ihrem onClick-Attribut