Textfelder akzeptieren nur Zahlen

Hallo zusammen,

was ich versuche hin zu bekomme ist, die Eingabe in Kontaktformularen aus Textfeldern nur mit Zahlen. Nun habe ich gesucht und gesucht und eine Funktion gefunden :D
Das Problem ist nur, das diese Funktion nur einmal geht, sprich wenn man in das Textfeld klickt in dem diese Funktion hinterlegt wurde, funktioniert sie nur für dieses und nicht bei weiteren.

Hier mal der Link von wo ich es habe:
https://wordpress.org/support/topic/…-digits-how-to/

Dort steht auch unten schön das selbe Problem das ich nun habe :rolleyes:
Gibt es eine Möglichkeit diese Funktion dann immer wieder neu zu laden?

Hier die Funktion um nicht dem Link folgen zu müssen ;)

/**
* CF7: Numbers Only Validation
* Validate the input fields with CSS class .wpcf7-numbers-only to allow numbers only.
*/
add_action( 'wp_footer', 'wpcf7_input_numbers_only');
function wpcf7_input_numbers_only() {
  echo '
  <script>
  onload =function(){
    var ele = document.querySelectorAll(\'.wpcf7-numbers-only\')[0];
    ele.onkeypress = function(e) {
      if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
      return false;
    }
    ele.onpaste = function(e){
      e.preventDefault();
    }
  }
  </script>
  ';
}

Weiß dort jemand weiter?

Number Field hab ich vorher drin gehabt. Diese haben aber rechts so ein "nicht schönes" rauf und runter zähl Feld o_O Also es geht nur um aussehen bei diesem Feld :mad: Gibt es eine Möglichkeit diese Number Fields so aussehen zu lassen wie ein Text Field? Falls ja werde ich es so machen

Hab es aber auch gelöst mit der Funktion :) Ist nur nicht wirklich schön wenn ich ehrlich bin aber es geht

/**
* CF7: Numbers Only Validation
* Validate the input fields with CSS class .wpcf7-numbers-only to allow numbers only.
*/
add_action( 'wp_footer', 'wpcf7_input_numbers_only');
function wpcf7_input_numbers_only() {
  echo '
  <script>
  onload =function(){
    var ele = document.querySelectorAll(\'.wpcf7-numbers-only\');
    ele.forEach(function(el) {
          el.onkeypress = function(e) {
              if(isNaN(this.value + "" + parseInt(String.fromCharCode(e.charCode))))
              return false;
        }
        el.onpaste = function(e){
              e.preventDefault();
        }
    });
  }
  </script>
  ';
}

Danke.

Jetzt hab ich nur eine Frage wo soll ich jetzt das CSS hin packen? ins Child Theme funktioniert es nicht o_O

[FONT=Times New Roman]Diesen CSS um diese Spinners zu entfernen:

/* Chrome, Safari, Edge, Opera */


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Theme wird Hemingway benutzt[size=18].[/SIZE][/FONT][FONT=Arial][size=18] [/SIZE][/FONT]

Zitat von b3317133

Und wo genau packst Du dieses CSS hin? Ohne Link zur betreffenden Seite, wo man sich das Problem ansehen kann, wird man Dir kaum sinnvoll helfen können, in der Theme Demo gibt es kein Formular zum Nachvollziehen.

Ein Link zur Seite gibt es noch nicht.
Ich werde es erst einmal so lassen, da es ja nun mit dem javascript oben läuft ;)
Mir ist eine wichtigere Frage gekommen auf die ich keine Lösung habe, vielleicht kannst du dort auch Helfen :):)