집 > 기사 > 웹 프론트엔드 > 수동 입력을 금지하기 위해 jQuery 모니터링 코드 스캐너를 구현하는 방법

수동 입력을 금지하기 위해 jQuery 모니터링 코드 스캐너를 구현하는 방법

小云云원래의: 2018-01-22 10:49:043751검색

이 글에서는 주로 jQuery 기반의 코드 스캐닝 건 모니터링을 공유합니다. 단지 바코드 스캐닝 정보를 모니터링하고 얻고 싶다면 직접 사용해도 좋고, 스스로 확장해야 하는 바코드 판단과 처리 로직이 더 있다면 모두에게 도움이 되길 바랍니다.

1. 기능 요구 사항

바코드 스캐너를 사용하여 바코드를 스캔하고 웹 페이지의 스캐너에서 데이터를 모니터링하고 가져오며 사용자가 수동 입력 작업을 수행하는 것을 금지합니다.

코드 스캐너가 키보드 입력을 시뮬레이션하기 때문에 초기 아이디어는 매우 간단합니다. USB 인터페이스를 사용하여 컴퓨터에 연결하면 js로 모니터링할 수 있는 외부 입력 장치가 됩니다. 그러나 사용자 입력에 수동으로 일부 처리가 필요한지 확인하는 방법은 무엇입니까?

2. 주요 문제점

1. 수동 입력 여부 판단 방법

2. 바코드 입력 완료 여부 판단 방법

3. 해결 방법

수동 입력에 대한 해결 방법은 누르는 순간부터 입력까지의 시간을 비교하는 것입니다. 키 시간 간격 해제 및 두 키 누르기 사이의 시간 간격.

스캐너의 입력 속도가 매우 빠르기 때문에 제가 테스트한 스캐너의 입력 간격은 약 15~60밀리초 정도이고, 수동 입력은 일부러 한계를 뛰어넘어 빠르게 입력하려는 것이 아닌 이상 100~200 사이입니다. . 이 간격 값은 코드 스캔 속도를 초과하지 않는 한 매우 작게 제어할 수 있습니다.

입력 완료 판단: 입력 상자에서 자릿수가 원하는 숫자에 도달하면 처리를 위해 서버에 제출합니다. 두 번째는 코드 스캐너를 기반으로 하기 때문입니다. 사용을 구성할 수 있습니다. 코드가 성공적으로 스캔되면 끝에 캐리지 리턴이 추가됩니다. 따라서 캐리지 리턴의 키코드를 기준으로 입력이 종료된 것으로 판단할 수 있으며, 이후 입력란의 값을 획득한 후 후속 처리(서버에 제출 등)를 수행하게 된다.

4. 코드

시간 간격의 판단은 jQuery의 세 가지 이벤트인 keydown, keypress, keyup에 따라 달라집니다. 방금 눌렀으나 키 값이 아직 텍스트 상자에 기록되지 않았습니다. 키를 누르고 해당 값이 텍스트 상자에 입력되었으며 키업 팝업이 나타납니다.

판단해야 할 것은 버튼을 누른 후부터 들어올릴 때까지의 시간 간격과 두 번의 키다운 사이의 시간 간격입니다.

주요 수동 입력 판단 코드입니다.

var barcode = {
  listenerObj: null,
  oneKeyTime : '', /* 一次按键时间间隔 */
  twoKeyTime : '', /* 两次按键时间间隔 */
  keyDownTime: '', /* 键按下的时间  */
  barcodeLen : 8 , /* 条形码长度   */
  spanTime  : 70, /* 一次按键按下到释放的时间间隔 */
  on_key_down : function (){
    var that = this;
    this.listenerObj.keydown(function(e){
      if(e.which !== 13 && !(that.in_range(e.which))){
        $(that.listenerObj).val('');
        return ;
      }
      var d = new Date();
      var curTime = parseInt(d.getTime());
      if(that.keyDownTime !== '' && that.keyDownTime !== NaN){
        that.twoKeyTime = curTime - that.keyDownTime;
      }
      that.keyDownTime = curTime;
    });
  },
  on_key_up : function(){
    var that = this;
    this.listenerObj.keyup(function(e){
      var d = new Date();
      var keyUpTime = d.getTime();
      that.oneKeyTime = parseInt(keyUpTime) - parseInt(that.keyDownTime);
      var isHand = that.checkHandInput();
      if(isHand && that.in_range(e.which)){
        layer.msg('禁止手动输入');
        $(that.listenerObj).val("");
      }
    })
  },
  on_key_press : function(){
    var that = this;
    this.listenerObj.keypress(function(e){
      if(e.which == 13 && that.check_barcode()){
        that.createListEl();
      }
    });
  },
  checkHandInput : function(){
    if((this.oneKeyTime > this.spanTime) || this.twoKeyTime > this.spanTime){
      return true;
    }else{
      return false;
    }
  },
}

코드를 정리해서 Github에 올렸습니다.

내 js 코드의 프롬프트는 layer.js를 사용하므로 이를 사용하는 경우 index.html의 예를 따르고 관련 js를 소개하세요.

<input id="barCode" value="" type="text" placeholder="stay focus" style="" name="">
$("#barCode").startListen({
  barcodeLen : 10,
  letter : true,
  number : true,
  show : function(code){
    layer.msg(code);
  }
});

여기서 구성 가능한 매개변수: 바코드 길이 포함, 영어 포함 여부 문자, 숫자 포함 여부. 그리고 쇼 콜백 메소드는 코드가 성공적으로 스캔되고 바코드가 합법적일 때 호출되며 서버 업로드와 같은 사용자 정의 작업을 수행하기 위해 바코드 값을 반환합니다.

코드에는 페이지의 입력 상자에 스테이 포커스가 있으므로 페이지의 다른 입력 요구 사항을 실현할 수 없으며 keepFocusInput 호출을 제거할 수 있습니다.

수동 입력을 금지하기 위해 jQuery 모니터링 코드 스캐너를 구현하는 방법

관련 기사