vue、dom、监听扫码枪 输入框与全屏获取扫码输入的结果 及 非扫码输入的结果 单输入框 多状态接口查询

• 广为流传版本 的 new + 提供非扫码情况下的数据返回

function ScannerListener(resolve, event, reject) {
    this.event = event || document
    this.resolve = resolve
    this.reject = reject
    this.code = ""
    this.rejcetCode = ""
    this.lastTime = undefined
    this.nextTime = undefined
    this.lastCode = undefined
    this.nextTime = undefined
}
ScannerListener.prototype.init = function (resolve, reject){
    if(!this.event){
        throw Error('没有事件绑定元素')
    }
    this.event.onkeypress = (e) => {   
            this.nextCode = e.keyCode   // 记录当前的 keyCode
            if (this.nextCode === 13) { // 如果是13 -> 结束输入
                console.log(this, 'keypress')
                // console.log(this.code); // 获取到扫码枪输入的内容，做别的操作
                if (this.code.length < 3) {
                    this.reject && this.reject(this.rejcetCode)
                    reject && reject(this.rejcetCode)
                    this.rejcetCode = ''
                    return;
                } // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有
    
                // console.log(this.code); // 获取到扫码枪输入的内容，做别的操作
                this.resolve && this.resolve(this.code)
                resolve && resolve(this.code)
    
                // 状态清空
                this.code = ''
                this.rejcetCode = ''
                this.lastCode = ''
                this.lastTime = ''
                return;
            }
            // keyCode 不是13 执行
            this.nextTime = new Date().getTime(); // 记录当前触发时间
            // 如果没有触发过 记录code
            if (!this.lastTime && !this.lastCode) { 
                this.code += e.key || '' 
                this.rejcetCode = e.key || ''
            }
            // 触发过本事件 本次触发距上次触发大于 30ms 初始化code 并赋值   30 键盘输入 正常情况不会小于30ms
            else if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 30) {
                this.code = e.key || ''
            // 触发过本事件 且触发间距不大于 30 ms 值拼接
            } else if (this.lastCode && this.lastTime) { 
                this.code += e.key || ''
            }
            this.rejcetCode += e.key
            // 更新上次触发的事件与上次触发的keycode
            this.lastCode = this.nextCode
            this.lastTime = this.nextTime
        
    }
}
// 该方法需保证 扫码枪单键输入速度
// const sCode = new ScannerListener()
// sCode.init(code => {
//     console.debug('成功', code)
// }, code => {
//     console.debug('失败', code)
// })

• 监听input 注意关闭input 默认保存上次的输入值 （）

function getScannerListener(input, success, error){
    let timer = undefined
    let lastKeyupTime = undefined
    let lastInputValue = ''
    input.addEventListener('keyup', e => {
        // 上次的值 = ''  这次lenght > 0 触发更新首次输入时间
            let inputValue = input.value || ''
            // console.log(lastInputValue ,inputValue )
            if(lastInputValue === '' && inputValue.length > 0){
                lastKeyupTime = new Date().getTime() // console.log('触发首次时间更新')
            }
        lastInputValue = input.value
        clearTimeout(timer)
        timer = setTimeout(() => {
            if(e.keyCode === 13){ // 结束输入
                if(new Date().getTime() - lastKeyupTime < 300 ){ //总输入时间小于300ms 扫码枪
                    console.log('扫码',input.value)
                    success && success(input.value)
                }else{
                    console.log('非扫码', input.value)
                    error && error(input.value)
                }
                lastKeyupTime = undefined
                clearTimeout(timer)
            }
        },30) // 30ms 单键输入延迟
    })
    
}

// getScannerListener(document.getElementById('input'))

• vue数据监听 触发扫码枪 （未测试 逻辑和监听input 差不多啦）

<input @enter="scannerListener.end = true" v-model="value"></input>

{
    // ...
    data: {
        scannerListener: {
            timer: undefined, //定时器id
            lastKeyupTime: undefined,
            end: false // 结束输入标志
        }
    }
    watch: {
        'value': function (val, oldval){
                // 上次的值 = ''  这次lenght > 0 触发更新首次输入时间
                if(oldval === '' && val.length > 0){
                    this.scannerListener.lastKeyupTime = new Date().getTime() // console.log('触发首次时间更新')
                }
            clearTimeout(this.scannerListener.timer)
            this.scannerListener.timer = setTimeout(() => {
                if(this.scannerListener.end === true){ // 结束输入
                    if(new Date().getTime() - this.scannerListener.lastKeyupTime < 300 ){ //总输入时间小于300ms 扫码枪
                        console.log('扫码',val)
                        // 使用异步处理val
                    }else{
                        console.log('非扫码', val)
                        // 使用异步处理val
                    }
                    this.scannerListener.lastKeyupTime = undefined
                    this.scannerListener.end = false
                    clearTimeout(this.scannerListener.timer)
                }
            },30) // 30ms 单键输入延迟
        }
    }
    // ...
}