webentwicklung-frage-antwort-db.com.de

Отключение клавиши ввода для формы

Я пытался отключитьEnterключ в моей форме. Код, который я имею, показан ниже. По какой-то причине клавиша ввода все еще вызывает отправку. Код находится в моем разделе заголовка и кажется правильным из других источников.

disableEnterKey: function disableEnterKey(e){
        var key;      
        if(window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox      

        return (key != 13);
    },
30
Chris Pinski

wenn Sie jQuery verwenden, ist es ziemlich einfach. Bitte schön

$(document).keypress(
  function(event){
    if (event.which == '13') {
      event.preventDefault();
    }
});
53
Steven Jiang

Die meisten Antworten sind in jquery enthalten. Sie können dies perfekt in reinem Javascript tun, einfach und ohne Bibliothek. Hier ist es:

<script type="text/javascript">
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>

Dieser Code funktioniert hervorragend, da er die Tastendruckaktion "Eingabe" für Eingabetyp = 'Text' nur deaktiviert. Das bedeutet, dass Besucher weiterhin die Eingabetaste im Textbereich und auf der gesamten Webseite verwenden können. Sie können das Formular immer noch absenden, indem Sie mit den Tab-Tasten zum "Senden" -Button gehen und "Enter" drücken.

Hier einige Highlights:

  1. Es ist in reinem Javascript (keine Bibliothek erforderlich).
  2. Es prüft nicht nur die gedrückte Taste, sondern auch, ob das Eingabeelement "Eingabe" = "Text" gedrückt wurde. (Das verursacht das fehlerhafteste Formular
  3. Zusammen mit dem obigen kann der Benutzer die "Enter" -Taste an einer anderen Stelle verwenden.
  4. Es ist kurz, sauber, schnell und auf den Punkt.

Wenn Sie "Enter" auch für andere Aktionen deaktivieren möchten, können Sie console.log (e) hinzufügen. Zu Testzwecken klicken Sie in Chrom auf F12. Klicken Sie auf der Registerkarte "Konsole" auf die Schaltfläche "Backspace", und sehen Sie darin, welche Werte zurückgegeben werden. Anschließend können Sie alle diese Parameter als Ziel festlegen, um den Code weiter zu verbessern oben für Ihre Bedürfnisse nach"e.target.nodeName","e.target.type"und viele mehr ...

21
Tarik

versuche es ^^

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

Hoffe das hilft

18
Hatake Kakashi

Mit jQuery können Sie dies auf einfache Art und Weise auf die entsprechenden Eingabeelemente beschränken:

//prevent submission of forms when pressing Enter key in a text input
$(document).on('keypress', ':input:not(textarea):not([type=submit])', function (e) {
    if (e.which == 13) e.preventDefault();
});

Dank dieser Antwort: https://stackoverflow.com/a/1977126/560114 .

4
Matt Browne

Fügen Sie einfach in Ihr Formular-Tag Folgendes ein:

onkeypress="return event.keyCode != 13;"
2
YASH GAUTAMI

Versuchen Sie für eine Lösung ohne Javascript, ein <button disabled>Submit</button> in Ihr Formular, das vor allen anderen Senden-Schaltflächen/Eingaben positioniert ist. Ich schlage unmittelbar nach dem <form> Eröffnungstag (und mit CSS, um es auszublenden, accesskey = '- 1', um es aus der Tabulatorreihenfolge herauszuholen, usw.)

AFAICT, Benutzerprogramme suchen nach der ersten Schaltfläche zum Senden when ENTER wird in einer Eingabe getroffen, und wenn diese Schaltfläche deaktiviert ist, wird aufgehört, nach einer anderen zu suchen.

Die Standardschaltfläche eines Formularelements ist die erste Übergabeschaltfläche in Baumreihenfolge, deren Formulareigentümer dieses Formularelement ist.

Wenn der Benutzeragent das implizite Senden eines Formulars durch den Benutzer unterstützt (z. B. wenn auf einigen Plattformen die Eingabetaste gedrückt wird, während ein Textfeld das Formular implizit sendet), gilt dies für ein Formular, dessen Standardschaltfläche eine definierte Aktivierung aufweist Das Verhalten muss dazu führen, dass der Benutzeragent synthetische Klickaktivierungsschritte für diese Standardschaltfläche ausführt.

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

https://www.w3.org/TR/html5/forms.html#implicit-submission

Ich weiß jedoch, dass Safari 10 MacOS sich hier falsch verhält und das Formular absendet, auch wenn die Standardschaltfläche deaktiviert ist.

Also, wenn Sie Javascript annehmen können, fügen Sie <buttononclick="return false;">Submit</button> stattdessen. Auf ENTERwird der Onclick-Handler aufgerufen, und da er false zurückgibt, wird der Übermittlungsprozess gestoppt. Browser, mit denen ich das getestet habe, werden nicht einmal die Browser-Validierungssache ausführen (Konzentration auf das erste ungültige Formularsteuerelement, Anzeige einer Fehlermeldung usw.).

2
Erics

Weitere Informationen zu jQuery.

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

Zum Anfang Ihr Feedback an uns Weitere InformationenEnter, это ничего не сделает.

1
Jaime Rodriguez

Fügen Sie einfach folgenden Code in <Head> Tag in Ihren HTML-Code ein. Es wird die Formularübergabe für die Eingabetaste für alle Felder des Formulars ausgefüllt.

<script type="text/javascript">
    function stopEnterKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopEnterKey;
</script>
1
Kailas Mane

Решение очень простое:

Заменить тип "Отправить" кнопкой

<input type="button" value="Submit" onclick="this.form.submit()" />
0
Samir Patel

Ich habe alle oben genannten Lösungen überprüft, sie funktionieren nicht. Die einzig mögliche Lösung ist, das Ereignis 'onkeydown' für jede Eingabe des Formulars abzufangen Sie müssen disableAllInputs mit dem Onload der Seite oder über jquery ready ()

/*
 * Prevents default behavior of pushing enter button. This method doesn't work,
 * if bind it to the 'onkeydown' of the document|form, or to the 'onkeypress' of
 * the input. So method should be attached directly to the input 'onkeydown'
 */
function preventEnterKey(e) {
    // W3C (Chrome|FF) || IE
    e = e || window.event;
    var keycode = e.which || e.keyCode;
    if (keycode == 13) { // Key code of enter button
        // Cancel default action
        if (e.preventDefault) { // W3C
            e.preventDefault();
        } else { // IE
            e.returnValue = false;
        }
        // Cancel visible action
        if (e.stopPropagation) { // W3C
            e.stopPropagation();
        } else { // IE
            e.cancelBubble = true;
        }
        // We don't need anything else
        return false;
    }
}
/* Disable enter key for all inputs of the document */
function disableAllInputs() {
    try {
        var els = document.getElementsByTagName('input');
        if (els) {
            for ( var i = 0; i < els.length; i++) {
                els[i].onkeydown = preventEnterKey;
            }
        }
    } catch (e) {
    }
}
0
Dimon579