我想制作一个“ NumPad”，在其中可以在输入字段中输入4位数字的键码。单击四个按钮后，将按下提交按钮。我找到了一些代码片段，如果我使用键盘，它可以正常工作。这是我走的路：
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>将您的提交检查添加到您的addNum()功能中：
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>您可能想使用正则表达式验证它实际上是一个4位数字：
document.getElementById('login').value.match(/^\d{4}$)
此处阻止了表单提交，这就是为什么我将警报置于...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句