Formulareinreichung beim Drücken der Eingabetaste für Text verhindern

Ich weiß, dass diese Frage schon einmal gestellt wurde, aber ich konnte keine befriedigende Antwort für meine Situation finden. Also frage ich nochmal.Formulareinreichung beim Drücken der Eingabetaste für Text verhindern

Ich habe ein einfaches Formular mit 2 Textfeldern und einem Absenden-Button. Nachdem der Benutzer Text in einem der beiden Textfelder eingegeben hat, kann er sie nicht über die Eingabetaste senden. Nur der Übergabeknopf sollte die Übermittlung ermöglichen. Ich dachte, Einfangen der Tastendruck eingeben und aus dem Event-Handler onchange falsche Rückkehr würde den Trick aber offenbar nicht, das verursacht noch ein Formular Vorlage ...

function doNotSubmit(element) { 

     alert("I told you not to, why did you do it?"); 
     return false; 

} 
</script> 


<form id="myForm" action="MyBackEnd.aspx" method="post"> 

<table> 
    <tbody> 
    <tr> 
     <td> 
      Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)"> 
     </td> 
     <td> 
      Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" > 
     </td> 
    </tr> 
    </tbody> 
</table> 

<input type=submit>

ich auf beide getestet Chrome und FF (neueste Versionen).

Können Sie mir bitte zeigen, wie Sie die Formularübergabe verhindern können?

Danke.

Quelle

2015-05-21 AbuMariam

möglich Duplikat [Verhindern, dass Benutzer Formular durch Anschlagen eingeben] (http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter) – dan08

Erste Ich denke du willst onkeypress oder onkeydown statt onchange. Zweitens, woher kommt "e" in Ihrer Funktion "doNotSubmit"? – ray

huckepack auf @ Dasein anwser testen mögen Sie den Standard verhindern Verhalten statt Stoppen der Ausbreitung (dh Zurückgeben falscher Werte):

document.getElementById("myForm").onkeypress = function(e) { 
 
    var key = e.charCode || e.keyCode || 0;  
 
    if (key == 13) { 
 
    alert("I told you not to, why did you do it?"); 
 
    e.preventDefault(); 
 
    } 
 
}

<form id="myForm" action="MyBackEnd.aspx" method="post"> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
      Joe: <input id="JoeText" type="text"> 
 
     </td> 
 
     <td> 
 
      Schmoe: <input id="SchmoeText" type="text" > 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<input type=submit>

Quelle

2015-05-21 22:38:55 devkaoru

@Dasein und devkaoru, ich denke, Ihr Vorschlag wird funktionieren, aber gerade jetzt, wenn ich das Javascript einfügen, wie es ist, macht es Meine Seite lädt einen Fehler "document.getElementById (...) ist null". Irgendeine Idee, warum das passiert, bin ich sicher, dass der Name des Formulars "myForm" korrekt ist? – AbuMariam

Ihr Skript wird höchstwahrscheinlich geladen, bevor Ihr DOM bereit ist. Verwenden Sie ein On-Ready-Ereignis, um dies zu verhindern: http://stackoverflow.com/questions/9899372/pure-javascript-äquivalence-to-jquerys-ready-how-to-call-a-function-when-the – devkaoru

Ja, das war es. – AbuMariam

ich denke, das tun sollte:

document.getElementById("myInput").onkeypress = function(e) { 
    var key = e.charCode || e.keyCode || 0;  
    if (key == 13) { 
     alert("I told you not to, why did you do it?"); 
     return false; 
    } 
}

Quelle

2015-05-21 21:32:28 user2755140

Nein, tut mir leid, es funktioniert nicht. Das Formular wird noch übermittelt. Aber merkwürdigerweise sehe ich auch keine Warnung. – AbuMariam

Und ja, ich habe den Parameter von getElementbyId in "JoeText" geändert. – AbuMariam

Seltsamerweise funktioniert es für mich, wie Sie hier überprüfen können: http://jsfiddle.net/a70wuoo9/1/ – user2755140

Wenn Sie einen Submit-Button dann das Standardformular Verhalten gehören auf Enter-Taste zu unterbreiten ist. Um versehentliche Übermittlungen zu vermeiden, könnten Sie dem onsubmit-Ereignis (Formular A) einen Bestätigungsdialog hinzufügen. Eine andere Alternative besteht darin, den Übergabeknopf durch Ihren eigenen zu ersetzen (Formular B). Der Benutzer müsste dann jedoch auf die Schaltfläche zum Übermitteln klicken.

Run Schnipsel (getestet in Chrome, Firefox und IE 5-11)

<html> 
 
<body> 
 
Form A: This form submits on enter key  
 
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')"> 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="submit"> 
 
</form> 
 
<p> 
 
Form B: This form submits only on button click<br> 
 
<form action="hanlder.aspx" method="post" > 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()"> 
 
</form> 
 
    
 
</body> 
 
</html>

Quelle

2015-05-21 22:13:42 Roberto

Formulareinreichung beim Drücken der Eingabetaste für Text verhindern

Antwort

Verwandte Themen