Zahlen im Eingabefeld zählen und dann senden

Question

Ich möchte ein "NumPad" machen, wo ich einen 4-stelligen Schlüsselcode in ein Eingabefeld eingeben kann. Nachdem ich auf die vier Buttons geklickt habe, wird der Submit-Button gedrückt. Ich habe ein paar Code-Snippets gefunden und es funktionierte, wenn ich die Tastatur benutzte. Dies ist, wie weit ich gekommen:

function addNum(num){ 
 
    document.getElementById('login').value += num; 
 
} 
 
$('#login').keyup(function(){ 
 
    if(this.value.length == 4){ 
 
     $('#enter').click(); 
 
    } 
 
});

#numpad { 
 
    width: 200px; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
} 
 

 
.number { 
 
    min-width: 26%; 
 
    height: 60px; 
 
    float: left; 
 
    border: 1px solid; 
 
    margin: 10px; 
 
    vertical-align: middle; 
 
    display: block; 
 
    font-size: 2em; 
 
    padding-top: 8px; 
 
    padding-left: 30px; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 

 
a:hover .number { 
 
    background: black; 
 
    color: white; 
 
}

<form action="action.php" method="post" name="loginform" id="loginform"> 
 
    <input type="password" class="form-control" name="login" id="login"> 
 
    <input type="submit" id="enter" value="Submit"> 
 
</form> 
 
<div id="numpad"> 
 
    <div class="row"> 
 
    <a href="#" onClick="addNum('1');"><div class="number">1</div></a> 
 
    <a href="#" onClick="addNum('2'); return false"><div class="number">2</div></a> 
 
    <a href="#" onClick="addNum('3'); return false"><div class="number">3</div></a> 
 
    </div> 
 
    <div class="row"> 
 
    <a href="#" onClick="addNum('4'); return false"><div class="number">4</div></a> 
 
    <a href="#" onClick="addNum('5'); return false"><div class="number">5</div></a> 
 
    <a href="#" onClick="addNum('6'); return false"><div class="number">6</div></a> 
 
    </div><div class="row"> 
 
    <a href="#" onClick="addNum('7'); return false"><div class="number">7</div></a> 
 
    <a href="#" onClick="addNum('8'); return false"><div class="number">8</div></a> 
 
    <a href="#" onClick="addNum('9'); return false"><div class="number">9</div></a> 
 
    </div> 
 
</div>

Answer 1

Ihr Scheck an Ihre addNum() Funktion einreichen hinzufügen:

function addNum(num) 
 
{ 
 
    document.getElementById('login').value += num; 
 
    if((document.getElementById('login').value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/)) 
 
    { 
 
     alert("Form Submitted"); 
 
     document.forms["loginform"].submit(); 
 
    } 
 
} 
 
$('#login').keyup(function() { 
 
    if((this.value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/)) 
 
    { 
 
     alert("Form Submitted"); 
 
     document.forms["loginform"].submit(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="action.php" method="post" name="loginform" id="loginform"> 
 
    <input type="password" class="form-control" name="login" id="login"> 
 
    <input type="submit" id="enter" value="Submit"> 
 
</form> 
 
<div id="numpad"> 
 
    <div class="row"> 
 
    <a href="#" onClick="addNum('1');"><div class="number">1</div></a> 
 
    <a href="#" onClick="addNum('2');"><div class="number">2</div></a> 
 
    <a href="#" onClick="addNum('3');"><div class="number">3</div></a> 
 
    </div> 
 
    <div class="row"> 
 
    <a href="#" onClick="addNum('4');"><div class="number">4</div></a> 
 
    <a href="#" onClick="addNum('5');"><div class="number">5</div></a> 
 
    <a href="#" onClick="addNum('6');"><div class="number">6</div></a> 
 
    </div><div class="row"> 
 
    <a href="#" onClick="addNum('7');"><div class="number">7</div></a> 
 
    <a href="#" onClick="addNum('8');"><div class="number">8</div></a> 
 
    <a href="#" onClick="addNum('9');"><div class="number">9</div></a> 
 
    </div> 
 
</div>

Möglicherweise möchten Sie bestätigen, dass es eigentlich eine 4-stellige Zahl mit Regex:

document.getElementById('login').value.match(/^\d{4}$) 

Das Formular Vorlage ist hier gesperrt, deshalb habe ich die Warnung in setzen ...

Answer 2

Sie diese reinigen können ein gutes Stück nach oben, indem sie mit einem Hörer Ihre Inline-Click-Ereignisse zu ersetzen:

$(function(){ 
 
    $('#numpad a').on("click",function(e){//listen for clicks on the numpad elements 
 
     e.preventDefault();//don't follow the link 
 
     $('#login').val($('#login').val()+$(this).text()).change();//append the value 
 
    }); 
 
    $('#login').on("change keyup",function(){//on change or keyup 
 
     if($(this).val().length == 4){//if the val is 4 chars long 
 
      //$('#loginform').submit();//trigger submission 
 
      $('#enter').click();//or click the submit button if you dont want to bypass the browsers native validation 
 
     } 
 
    }); 
 
    
 
    $('#loginform').on("submit",function(e){//on submit    
 
     if($(this)[0].checkValidity()){//if valid 
 
      e.preventDefault();//stop submission for this demo only (remove when live) 
 
      alert("submitted!");//do an alert (demo only, remove when live) 
 
     } else { 
 
      e.preventDefault();//prevent submission 
 
      alert("Invalid!");//do an alert 
 
     } 
 
     $('#login').val("");//reset the input 
 
    }); 
 
});

#numpad { 
 
    width: 250px; 
 
    -webkit-user-select: none; /* Chrome/Safari */   
 
    -moz-user-select: none; /* Firefox */ 
 
    -ms-user-select: none; /* IE10+ */ 
 
} 
 
#numpad a { 
 
    width: 60px; 
 
    line-height: 60px; 
 
    display:inline-block; 
 
    border: 1px solid; 
 
    margin: 10px; 
 
    vertical-align: middle; 
 
    font-size: 2em; 
 
    text-align:center; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
} 
 
#numpad a:hover { 
 
    background: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="action.php" method="post" name="loginform" id="loginform"> 
 
    <input type="password" class="form-control" name="login" id="login" required="required" pattern="[0-9]{4}" title="4 numbers only" maxlength="4" /> 
 
    <input type="submit" id="enter" value="Submit" /> 
 
</form> 
 
<div id="numpad"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a></div>