在項目中,需要用 掃碼槍讀取條形碼信息,并把內容填入表單,實現表單自動提交,實現信息錄入!
常用場景:
參加活動時 身份查詢,活動資格查詢;
html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="__STATIC__/home/js/jquery.min.js"></script>
</head>
<body class="hold-transition login-page">
<form id='but' action="appDetail.php" method="post" >
<div class="am-u-sm-12 am-u-md-6 " >
<div class="am-input-group am-input-group-sm">
<input type="text" id='aname' name="aname" placeholder="手機號" value="" class="am-form-field" >
<button class="am-btn" ></button>
</div>
</div>
</form>
</body>
<script>
window.onload = function(e){
var code = "";
var lastTime,nextTime;
var lastCode,nextCode;
document.onkeypress = function(e) {
nextCode = e.which;
nextTime = new Date().getTime();
if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
code += String.fromCharCode(lastCode);
} else if(lastCode != null && lastTime != null && nextTime - lastTime > 100){
code = "";
}
lastCode = nextCode;
lastTime = nextTime;
}
this.onkeypress = function(e){
if(e.which == 13){
$('#aname').val(code); //自動填充到表單
$('#but').submit(); //自動提交指定的表單
console.log(code);
code = "";
}
}
}
</script>
</html>
這樣用JQuery對掃描槍的掃描監控,實現了表單自動填充與提交
喜歡的點桃心,喜歡一下~