输入字段中的字符数，然后提交

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}$) 

表单提交，在此受阻，这就是为什么我把警报在...

Answer 2

您可以通过向监听器更换您在线点击事件公平一点打扫一下：

$(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>