đếm ký tự trong trường nhập và sau đó gửi

Question

Tôi muốn tạo "NumPad", nơi tôi có thể nhập mã khóa gồm 4 chữ số vào trường nhập. Sau khi tôi nhấp vào bốn nút, nút gửi được nhấn. Tôi tìm thấy một vài đoạn mã và nó hoạt động nếu tôi sử dụng bàn phím. Đây là cách xa tôi đến:

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

Thêm nộp séc của bạn để addNum() chức năng của bạn:

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>

Bạn có thể muốn xác nhận rằng nó là thực sự là số có 4 chữ số sử dụng regex:

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

Các hình thức trình bị chặn ở đây đó là lý do tại sao tôi đặt cảnh báo trong ...

Answer 2

Bạn có thể làm sạch này lên một chút công bằng bằng cách thay thế các sự kiện nhấp chuột nội tuyến của bạn với một người biết lắng nghe:

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