解决扫码枪因输入法中文导致的问题 |
您所在的位置：网站首页 › 扫码枪扫码电脑不显示怎么办 › 解决扫码枪因输入法中文导致的问题 |
|
问题
最近公司项目上遇到了扫码枪因搜狗/微软/百度/QQ等输入法在中文状态下，使用扫码枪扫码会丢失字符的问题 思考这种情况是由于扫码枪的硬件设备，在输入的时候，是模拟用户键盘的按键来实现的字符输入的，所以会触发输入法的中文模式，并且也会触发输入法的自动联想。那我们可以针对这个来想解决方案。 方案一首先想到的第一种方案是，监听keydown的键盘事件，创建一个字符串数组，将每一个输入的字符进行比对，然后拼接字符串，并回填到输入框中，下面是代码： function onKeydownEvent(e) { this.code = this.code || '' const shiftKey = e.shiftKey const keyCode = e.code const key = e.key const arr = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-'] this.nextTime = new Date().getTime() const timeSpace = this.nextTime - this.lastTime if (key === 'Process') { // 中文手动输入 if (this.lastTime !== 0 && timeSpace export default { name: 'WispathScannerInput', data() { return { isFocus: false } }, beforeDestroy() { this.$el.firstElementChild.setAttribute('readonly', true) this.$el.firstElementChild.removeEventListener('focus', this.onPasswordFocus) this.$el.firstElementChild.removeEventListener('blur', this.onPasswordBlur) this.$el.firstElementChild.removeEventListener('blur', this.onPasswordClick) this.$el.firstElementChild.removeEventListener('mousedown', this.onPasswordMouseDown) this.$el.firstElementChild.removeEventListener('keydown', this.oPasswordKeyDown) }, mounted() { this.$el.firstElementChild.addEventListener('focus', this.onPasswordFocus) this.$el.firstElementChild.addEventListener('blur', this.onPasswordBlur) this.$el.firstElementChild.addEventListener('click', this.onPasswordClick) this.$el.firstElementChild.addEventListener('mousedown', this.onPasswordMouseDown) this.$el.firstElementChild.addEventListener('keydown', this.oPasswordKeyDown) const entries = Object.entries(this.$refs.scannerInput) // 解决ref问题 for (const [key, value] of entries) { if (typeof value === 'function') { this[key] = value } } this['focus'] = this.$el.firstElementChild.focus.bind(this.$el.firstElementChild) }, methods: { onPasswordInput(ev) { this.$emit('input', ev.target.value) if (ev.target.value === '') { this.$el.firstElementChild.setAttribute('readonly', true) setTimeout(() => { this.$el.firstElementChild.removeAttribute('readonly') }) } }, onPasswordFocus(ev) { this.isFocus = true setTimeout(() => { this.$el.firstElementChild.removeAttribute('readonly') }) }, onPasswordBlur() { this.isFocus = false this.$el.firstElementChild.setAttribute('readonly', true) }, // 鼠标点击输入框一瞬间，禁用输入框 onPasswordMouseDown() { this.$el.firstElementChild.setAttribute('readonly', true) }, oPasswordKeyDown(ev) { // 判断enter键 if (ev.key === 'Enter') { this.$el.firstElementChild.setAttribute('readonly', true) setTimeout(() => { this.$el.firstElementChild.removeAttribute('readonly') }) } }, // 点击之后，延迟200ms后放开readonly，让输入框可以输入 onPasswordClick() { if (this.isFocus) { this.$el.firstElementChild.setAttribute('readonly', true) setTimeout(() => { this.$el.firstElementChild.removeAttribute('readonly') }, 200) } }, onInput(_value) { this.$emit('input', _value) }, getList(value) { this.$emit('input', value) } // onChange(_value) { // this.$emit('change', _value) // } } } .scanner-input { position: relative; height: 36px; width: 100%; display: inline-block; .input-password { width: 100%; height: 100%; border: none; outline: none; padding: 0 16px; font-size: 14px; letter-spacing: 3px; background: transparent; color: transparent; // caret-color: #484848; } .input-text { font-size: 14px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; background-color: transparent; ::v-deep .el-input__inner { // background-color: transparent; padding: 0 16px; width: 100%; height: 100%; } } .input-text-focus { ::v-deep .el-input__inner { outline: none; border-color: #1c7af4; } } }至此，可以保证input[type=password]不会再有密码补全提示，并且也不会再切换页面时，会弹出密码保存弹窗。 但是有一个缺点，就是无法完美显示光标。如果用户手动输入和删除，使用起来会有一定的影响。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |