Einschränkung von Sonderzeichen in einem Formularfeld

Wollten Sie schon immer diese lästigen Sonderzeichen aus bestimmten Feldern in Ihren Formularen fernhalten? Vielleicht sind Sie es leid, dass Benutzer Emojis oder Symbole dort eingeben, wo sie nicht hingehören. In diesem Leitfaden zeigen wir Ihnen, wie Sie mit JavaScript diese unerwünschten Zeichen in Feldern wie Einzeiliger Text und Absatz verhindern können. Lassen Sie uns eintauchen und Ihre Formulare ein wenig ordentlicher machen!

Einschränkung von Sonderzeichen

Sind Sie bereit, aktiv zu werden? Das Wichtigste zuerst: Bringen Sie diese Schnipsel auf Ihre Website. Im Folgenden finden Sie zwei Codestücke - eines, um diese lästigen Sonderzeichen zu verhindern, und ein anderes, um zu verhindern, dass Benutzer in Formularfelder einfügen.

Wenn Sie nicht sicher sind, wie Sie diese Snippets zu Ihrer Website hinzufügen können, machen Sie sich keine Sorgen! Wir haben ein praktisches Tutorial zum Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms für Sie zusammengestellt. Hier finden Sie eine Schritt-für-Schritt-Anleitung.

/**
 * Restrict special characters from forms fields with special CSS class
 * Apply the class "wpf-char-restrict" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/
 */
 
function wpf_dev_char_restrict() {
?>
 
<script type="text/javascript">
     
    jQuery(function($){

        //Prevent any special characters in form fields with this CSS class name
        $( '.wpf-char-restrict' ).on( 'keypress', function(e){
             
			var regex = new RegExp("^[0-9a-zA-Z \b]+$");
			var key = String.fromCharCode(!event.charCode ? event.which: event.charCode);
			if (!regex.test(key)) 
				{
					alert ( "Special characters are not allowed in this field" ); // Put any message here
					event.preventDefault();
					return false;
				} 
        });
         
        //Prevent any paste features in form fields with this CSS class name
        $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
            var regex = new RegExp( "@" );
             
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
             
            if (!regex.test(key)) {
                alert ( "Pasting feature has been disabled for this field" ); // Put any message here
                e.preventDefault();
                return false;
            }
        });
         
    });
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

Mit der ersten Funktion wird die Eingabe von Sonderzeichen über die Tastatur verhindert. Die zweite Funktion verhindert auch das Einfügen per Tastatur oder Mausklick in dieses Feld.

Ihr Formular erstellen

Als nächstes erstellen Sie Ihr Formular und fügen Ihre Formularfelder hinzu. Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, sehen Sie sich bitte diese hilfreiche Anleitung an.

Hinzufügen der CSS-Klasse

Wählen Sie dann das Feld aus, das Sie einschränken möchten. Klicken Sie auf Feldoptionen und wählen Sie Erweitert.

Als nächstes fügen Sie wpf-char-restrict zum CSS-Klassen Feld. Sie wiederholen diesen Schritt für jedes Formularfeld, das Sie einschränken möchten. Für die Zwecke dieser Dokumentation fügen wir es sowohl dem Absatz und Einzeiliger Text Felder.

Wenn der Benutzer nun versucht, Sonderzeichen einzugeben oder etwas in diese Felder einzufügen, wird eine Warnmeldung auf dem Bildschirm angezeigt.

Dieses Beispiel zeigt einen Benutzer, der versucht, seine E-Mail-Adresse in das Feld " Kommentare" einzugeben.

Möchten Sie auch JavaScript verwenden, um die automatische Adressvervollständigung auf ein bestimmtes Land zu beschränken? Werfen Sie einen Blick auf unser Tutorial über die Beschränkung der automatischen Adressvervollständigung auf ein bestimmtes Land.

Referenz Aktion

wpforms_wp_footer_end