Sonderzeichen aus einem Formularfeld einschränken

Wollten Sie schon immer verhindern, dass diese lästigen Sonderzeichen in bestimmte Felder Ihrer Formulare gelangen? Vielleicht sind Sie es leid, dass Benutzer Emojis oder Symbole eingeben, wo sie nicht hingehören. In dieser Anleitung führen wir Sie durch die Verwendung von JavaScript, um diese unerwünschten Zeichen in Feldern wie Einzeiliger Text und Absatz zu stoppen. Tauchen wir ein und machen Ihre Formulare etwas geordneter!

Sonderzeichen einschränken

Bereit zum Handeln? Zuerst bringen wir diese Code-Schnipsel auf Ihre Website. Unten finden Sie zwei Code-Stücke – eines, um diese lästigen Sonderzeichen zu stoppen, und ein anderes, um zu verhindern, dass Benutzer in Formularfelder einfügen.

Wenn Sie sich nicht sicher sind, wie Sie diese Code-Schnipsel zu Ihrer Website hinzufügen, machen Sie sich keine Sorgen! Wir haben eine praktische Anleitung zum Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms für Sie. Schauen Sie dort für eine Schritt-für-Schritt-Anleitung nach.

/**
 * 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 );

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

Erstellen Ihres Formulars

Erstellen Sie als Nächstes Ihr Formular und fügen Sie Ihre Formularfelder hinzu. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, sehen Sie sich bitte diese hilfreiche Anleitung an.

Hinzufügen der CSS-Klasse

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

Fügen Sie als Nächstes wpf-char-restrict in das Feld CSS-Klassen ein. Sie wiederholen diesen Schritt für jedes Formularfeld, das Sie einschränken möchten. Für diese Dokumentation fügen wir es sowohl dem Feld Absatz als auch dem Feld Einzeiliger Text hinzu.

Und jetzt, wenn der Benutzer versucht, Sonderzeichen einzugeben, oder wenn er versucht, etwas in diese Felder einzufügen, erscheint eine Warnmeldung auf seinem Bildschirm.

Dieses Beispiel zeigt einen Benutzer, der versucht, seine E-Mail-Adresse in das Feld Kommentare einzufügen.

Möchten Sie auch JavaScript verwenden, um die Adress-Autovervollständigung auf ein bestimmtes Land zu beschränken? Schauen Sie sich unsere Anleitung zu So beschränken Sie die Adress-Autovervollständigung auf ein bestimmtes Land an.

Referenzaktion

wpforms_wp_footer_end