So stoppen Sie die Eingabetaste, um das Formular abzusenden

Möchten Sie die Enter-Taste auf Ihren Formularen deaktivieren? Es gibt viele Diskussionen darüber, ob Sie diese Taste deaktivieren sollten oder nicht, aber wenn Sie Ihre Recherche durchgeführt und festgestellt haben, dass es für Ihre Website am besten ist, diese Taste zu deaktivieren, finden Sie in diesem Artikel den notwendigen Code, um die Enter-Taste auf Ihren Formularen zu deaktivieren.

Deaktivieren der Eingabetaste

Um diese Taste auf Ihren Formularen zu deaktivieren, einschließlich der Submit-Schaltfläche, der Schaltflächen für die nächste/vorherige Seite sowie der Verwendung der Eingabetaste zur Navigation durch die Felder des Formulars, kopieren Sie einfach diesen Code und fügen Sie ihn zu Ihrer Website hinzu.

Wenn Sie Hilfe benötigen, wie und wo Sie Code-Schnipsel zu Ihrer Website hinzufügen können, sehen Sie sich dieses Tutorial an.

Wir müssen die Zahl eingeben, die die Enter-Taste auf einer Standardtastatur darstellt. Wir wissen bereits, dass diese durch die Zahl 13 dargestellt wird. Wenn Sie mehr über diese Zahlen und ihre Bedeutung erfahren möchten, sehen Sie sich diese Dokumentation an.

Für ein bestimmtes WPForms-Formular

/**
 * Disable the Enter key on a specific form 
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_specific_form( ) {
?>

    <script type="text/javascript">
        
        // Only run this snippet on the form ID 721
        jQuery( 'form#wpforms-form-721' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_specific_form', 30 );

Der obige Code zielt speziell auf die Formular-ID wpforms-form-721 ab. Sie müssen diesen Code ändern, um Ihre eigene Formular-ID anzupassen.

Wenn Sie Hilfe benötigen, wo Sie Ihre Formular-ID finden, lesen Sie bitte dieses Tutorial.

Für alle WPForms-Formulare

Wenn Sie dies jedoch für alle WPForms-Formulare hinzufügen möchten, verwenden Sie den unten gezeigten Code.

/**
 * Disable the Enter key WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_all_wpforms( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_all_wpforms', 30 );

Und das ist alles, was Sie brauchen, um diese Taste zu deaktivieren. Möchten Sie auch die Farbe der Submit-Schaltfläche ändern? Sehen Sie sich unser Tutorial an So ändern Sie die Farbe der Submit-Schaltfläche.

Referenzaktion

wpforms_wp_footer_end

FAQ

F: Wie kann ich die Schaltfläche "Weiter" deaktivieren, wenn ich Seitenumbrüche verwende?

A: Um die Schaltflächen "Weiter" und "Zurück" bei Verwendung des WPForms-Seitenumbruchfelds zu deaktivieren, verwenden Sie diesen Code-Schnipsel.

/**
 * Disable the enter key from going to the next page of a multi page form
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_stop_enter_submit_pagination( ) {
 ?>

<script type="text/javascript">
    jQuery(document)
        .off('keydown', '.wpforms-form input')
        .on('keydown', '.wpforms-form input', function(e) {
            if (e.keyCode === 13) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_stop_enter_submit_pagination', 30 );

F: Was ist, wenn ich die Eingabetaste auf allen Formularen meiner Website deaktivieren möchte?

A: Dieser Code-Schnipsel würde die Taste deaktivieren, unabhängig davon, ob es sich um ein WPForms-Formular oder das WordPress-Kommentarformular handelt.

/**
 * Disable the enter key from submitting the form for all forms on this WordPress site
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */

function wpf_dev_disable_enter_key_any_form( ) {
?>

    <script type="text/javascript">
        
        // Run this snippet on all WPForms forms
        jQuery( 'form' ).bind( 'keypress keydown keyup', function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
            }
        });
        
    </script>

<?php
}
add_action( 'wp_footer', 'wpf_dev_disable_enter_key_any_form', 30 );

F: Kann ich die Leertaste und die Eingabetaste deaktivieren, um das Formular abzuschicken?

A: Absolut! Verwenden Sie stattdessen diesen Code-Schnipsel.

/**
 * Disable the Enter and Space key on all WPForms forms
 *
 * @link https://wpforms.com/developers/how-to-stop-the-enter-key-from-submitting-the-form/
 */
 
function wpf_dev_disable_enter_space_keys_all_wpforms( ) {
?>
 
    <script type="text/javascript">
         
        // Run this snippet on all WPForms forms
        jQuery( 'form.wpforms-form' ).bind( 'keypress keydown keyup', function(e) {
			// 13 is to prevent the Enter key from submitting the form
			// 32 is to prevent the Space bar from submitting the form
            if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
				e.preventDefault();
				return false;
			}
        });
         
    </script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_enter_space_keys_all_wpforms', 30 );