javascript - 计算输入字段中的字符数，然后提交

Question

我想制作一个“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>

Answer 1

将您的提交检查添加到您的 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}$)

表单提交在这里被阻止，这就是为什么我把警报放在...