HTML頁面中條形碼或二維碼掃描槍的使用
阿新 • • 發佈:2019-02-06
條形碼或二維碼掃描槍是一個輸入工具,功能與鍵盤、滑鼠相似,與鍵盤滑鼠的區別是掃描槍從條形碼或二維碼中讀取資料,鍵盤或滑鼠需要手動錄入資料。
一、使用掃描槍的常用場景是
1.使用掃描槍掃描錄入資料,直接儲存到後臺系統
2.使用掃描槍掃描查詢資料並顯示出來
二、掃描槍在HTML頁面中運用
1.在HTML中使用掃描槍必須有input或者其他輸入框
2.在掃描槍進行掃描前,滑鼠的焦點需要移動到相應的輸入框中
3.掃描槍一般有自動帶有enter鍵(在掃描完自動按下enter鍵)
三、掃描槍在頁面中的使用設計
背景:頁面中滑鼠經常移動,不方便獲取焦點,每一次掃描前需要移動,介面操作變得繁瑣;為了解決此問題,以下設計,對使用掃描槍流程進行優化
1.頁面載入是同時定位到需要輸入框的並獲取焦點,使用掃描槍直接即可錄入資料
2.使用js監聽鍵盤中的Ctrl鍵,按下Ctrl鍵,滑鼠定位到需要輸入框的並獲取焦點
3.獲取焦點同時,選擇輸入框的內容,如果輸入框有內容,掃描槍錄入資料直接覆蓋之前的內容
4.監聽輸入框的值,掃描槍錄入完畢,輸入框值變化,同時觸發將要執行的事件
5.事件執行完,滑鼠重新定位到輸入框,並選擇輸入框內容
四、運用例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鍵盤按鍵監聽測試</title> </head> <body> baody <input name="name" placeholder="name" /> <input id='birthday' name="birthday" placeholder="birthday" /> </body> </html> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $("#birthday").focus(); function keyDown(e){ //IE核心瀏覽器 if (navigator.appName == 'Microsoft Internet Explorer'){ var keycode = event.keyCode; var realkey = String.fromCharCode(event.keyCode); }else {//非IE核心瀏覽器 var keycode = e.which; var realkey = String.fromCharCode(e.which); } // console.log('按鍵碼:' + keycode + '字元: ' + realkey); //監聽Ctrl鍵 if(keycode==17){ $("#birthday").focus(); $("#birthday").select(); } $("#birthday").change(function(){ console.log($(this).val()); $("#birthday").select(); }) } document.onkeydown=keyDown; </script>