JSFiddle - React, Tailwind, and code Playground

HTML

<!-- I wanna apply to this with getElementById -->
<input type="text" id="firma" name="firma" >

 </br>   

<!-- this one works as now, it only accepts alpha characters and spaces -->
<input type="text" id="firma2" name="firma2" >

JavaScript

var alphaOnly = /[sA-Za-z\söÖäÄüÜ]/g;
  var alphaextraOnly = /[A-Za-z\-&/'"\öÖäÄüÜ]/g;
  var alphadigitsOnly = /[sA-Za-z\söÖäÄüÜ\s1234567890]/g;
  var digitsOnly = /[1234567890]/g;
  var integerOnly = /[0-9\.]/g;
  var mailOnly = /[a-z\.@]/g;

  function restrictCharacters(myfield, e, restrictionType) {
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);

    // if they pressed esc... remove focus from field...
    if (code==27) { this.blur(); return false; }
    
    // ignore if they are press other keys
    // strange because code: 39 is the down key AND ' key...
    // and DEL also equals .
    if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
        if (character.match(restrictionType)) {
            return true;
        } else {
            return false;
        }
        
    }   
}

document.getElementById("firma2").onkeypress = function(e) {
    return restrictCharacters(this,e,alphaOnly); 
};