Möchten Sie die Eingabetaste in Ihren Formularen deaktivieren? Es gibt viele Debatten darüber, ob Sie diese Taste deaktivieren sollten oder nicht. Wenn Sie sich jedoch informiert haben und zu dem Schluss gekommen sind, dass es für Ihre Website am besten ist, diese Taste zu deaktivieren, finden Sie in diesem Artikel den erforderlichen Code, um die Eingabetaste in Ihren Formularen zu deaktivieren.
Deaktivieren der Eingabetaste
Um diese Taste in Ihren Formularen zu deaktivieren, die die Schaltfläche "Absenden", die Schaltflächen "Nächste/Vorherige Seite" sowie die Verwendung der Eingabetaste zum Navigieren durch die Formularfelder enthalten, kopieren Sie einfach diesen Code und fügen Sie ihn in Ihre Website ein.
Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte diese Anleitung.
Bitte beachten Sie, dass dieser Code nicht für konversationelle Formulare funktioniert.
Wir müssen die Zahl angeben, die die Eingabetaste auf einer Standardtastatur darstellt. Wir wissen bereits, dass dies die Zahl 13 ist. 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 ist speziell auf die Formular-ID wpforms-form-721 ausgerichtet. Sie müssen diesen Code ändern, um Ihre eigene Formular-ID anzupassen.
Wenn Sie Hilfe benötigen, um Ihre Formular-ID zu finden, lesen Sie bitte diese Anleitung.
Für alle WPForms-Formulare
Wenn Sie dies jedoch für alle WPForms-Formulare hinzufügen möchten, verwenden Sie den unten stehenden 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 );
Das ist alles, was Sie brauchen, um diese Taste zu deaktivieren. Möchten Sie auch die Farbe der Schaltfläche " Senden" ändern? Werfen Sie einen Blick auf unsere Anleitung zum Ändern der Farbe der Schaltfläche "Senden".
Referenz Aktion
FAQ
F: Wie kann ich die Schaltfläche "Weiter" bei der Verwendung von Seitenumbrüchen deaktivieren?
A: Um die Schaltflächen "Weiter" und "Zurück" zu deaktivieren, wenn Sie das WPForms-Seitenwechsel-Feld verwenden, verwenden Sie dieses Snippet.
/**
* 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: Dieses Snippet 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 beim Absenden des Formulars deaktivieren?
A: Auf jeden Fall! Verwenden Sie stattdessen einfach dieses Snippet.
/**
* 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 );