So beschränken Sie das Telefonfeld auf die Annahme von Zahlen

Möchten Sie das Feld Telefon so einschränken, dass nur Zahlen akzeptiert werden? Standardmäßig erlauben die Formate International und Smart die Eingabe von Buchstaben, schlagen aber bei der Validierung fehl, wenn Sie aus dem Feld herausspringen.

Mit einem kleinen Code-Snippet können Sie ganz einfach verhindern, dass Tastaturzeichen eingegeben werden, es sei denn, es handelt sich um eine Zahl. Das bedeutet, dass, wenn versucht wird, etwas anderes als Zahlen einzugeben, der Text einfach nicht eingegeben wird, wodurch das Feld gesperrt wird, bis eine Zahl eingegeben wurde.

Erstellung des Formulars

Zuerst müssen Sie ein neues Formular erstellen und Ihre Felder hinzufügen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen der CSS-Klasse

Als Nächstes müssen Sie dem Formularfeld Telefon eine CSS-Klasse hinzufügen. Jedes Telefon-Feld mit dieser Klasse akzeptiert nur einen numerischen Wert.

Um eine CSS-Klasse hinzuzufügen, wählen Sie das Telefon-Formularfeld aus, das Sie Ihrem Formular hinzugefügt haben, und fügen Sie im Tab Erweitert numbersOnly zu den CSS-Klassen hinzu.

Beschränken des Telefonfelds auf nur Zahlen

Jetzt ist es an der Zeit, den Snippet zu Ihrer Website hinzuzufügen, der das Feld auf die Eingabe von Zahlen beschränkt.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

/**
 * Restrict the Phone Field to Only Accept Numbers.
 *
 * @link https://wpforms.com/developers/how-to-restrict-phone-field-to-only-accept-numbers/
 */

function restrict_letters_in_phone_field( ) {
?>
	<script type="text/javascript">
		
		jQuery(document).ready(function () {    

			jQuery( '.numbersOnly' ).keypress(function (e) {   
 
				var charCode = (e.which) ? e.which : event.keyCode    
				if (String.fromCharCode(charCode).match(/[^0-9]/g))    
					return false;                        
			});    

		});   
 
	</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'restrict_letters_in_phone_field', 30 );

Dieser Snippet sucht automatisch nach jedem Formularfeld mit der CSS-Klasse numbersOnly und verhindert die Eingabe von allem außer den Tasten 0-9.

Und das ist alles, was Sie brauchen, um das Feld Telefon auf Zahlen zu beschränken! Möchten Sie die Telefonnummer in den E-Mail-Benachrichtigungen zu einem Link machen? Schauen Sie sich unser Tutorial an So machen Sie Telefonnummern zu einem Link in E-Mail-Benachrichtigungen.

Referenzaktion

wpforms_wp_footer_end

FAQ

F: Wie kann ich die Anzahl der eingegebenen Ziffern begrenzen?

A: Die Formate Smart und US für das Telefonfeld haben bereits eine gewisse Validierung für die Anzahl der eingegebenen Ziffern einer Telefonnummer und schlagen die Formularübermittlung fehl, wenn sich zu viele Ziffern im Feld befinden.