获取扫码枪输入数据

扫码枪原理

扫码过程中触发键盘事件，实际就是模拟键盘按键得过程

如何接收扫码枪扫码时获取到的信息

扫码信息一般为数字和字母得组合 获取扫码信息步骤：

• input标签自动获得焦点
• input标签监听keyup事件，通过event.target.value获得扫码数据

遇到得坑

• <input type="text"/>如果用这个来实现，监听keyup,输入法为英文可以正常获取扫码信息，那么当输入法为中文的时候得不到数据
• <input type="password"/>,解决中文输入法扫码的问题，因为password，在中文输入法的时候输入的也是数字和字母，监听keyup 可以获取到数据,这样又带来了新的问题，如果网站登录过用户，那么当input 获取焦点时会显示密码提示框。
• <input type="password" autocomplete="off" /> autocomplete="off"可以取消自动完成功能，但不是所有浏览器都支持，在高版本谷歌浏览器中不起作用。
• input password 模式显示都是密文不是明文。需要通过一个div来显示input value值

最终解决方案如下

• input 采用password模式，opacity设置为0,这样可以做到获取焦点的时候看不到光标
• div position: 'absolute' 覆盖input,用来显示将input中扫码信息显示到这个div

代码如下

import * as React from 'react';

export default class App extends React.Component {
  constructor(props: any) {
    super(props);

    this.state = {
      value: ''
    }
  }
  password = undefined;
  // 键盘事件
  keyup = (e) => {
    this.setState({
      value: e.target.value
    })
  }
  // 开始扫描
  clickStart = () => {
    console.log('clickStartPassword', this.password);
    this.password.focus();
  }
  // 重新扫描
  refresh = () => {
    this.password.focus();
    this.setState({
      value: ''
    })
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        {/* 容器元素，用来包裹input和div */}
        <div style={{ position: 'relative', height: '30px' }}>
          {/* password 用来获取焦点 监听keyup事件 */}
          <input
            ref={(ref) => this.password = ref}
            type="password"
            autoComplete="off"
            style={{ height: "28px", width: "100%", opacity: 0 }}
            onKeyUp={this.keyup}
            onChange={this.keyup}
            value={value}
          />
          {/* 用来显示扫码信息 */}
          <div style={{ position: 'absolute', width: '100%', height: '100%', left: 0, top: 0, color: '#000', background: '#fff' }}>
            {value}
          </div>
        </div>
        <div onClick={this.clickStart}>开始扫描</div>
        <div onClick={this.refresh}>重新扫描</div>
      </div>
    );
  }
}