背景

最近产品想要在页面上加一个input输入框，想要手动输入，也想要扫码枪扫描输入，大家都知道扫码枪扫描后会自动出发input的回车enter事件的，我当初也是这么认为的，所以在input上就直接绑定了keyup enter事件，在里面做一些接口请求之类的动作，后来这个页面被投放到门店的收银机，问题出现了：当机器为windows系统并且搜狗输入法中文时，扫码枪没有监听到自动回车事件，导致扫描枪没反应

解决方案

password的Input可以忽略输入法的中英文，所以password框里的内容，我们需要一个覆盖在上面的div来实时展示，这个div要像一个input存在，所以要模拟一个失焦和聚焦的闪烁光标，光标闪烁时真正聚焦的是password input框

需求设计

一个div和一个type为password ，两者数据实时绑定
div覆盖在password上，设定一个伪类来实现div的闪烁光标
password的focus和blur方法中控制div的光标是否显示
div的不设宽度，促使光标紧随div内容后面

代码

先写一个barcode.vue的子组件

<template><div style="position: relative;width: 200px;"><el-inputtype="password"v-model="barCode"autocomplete="off"class="pad-input"ref="barcodeScanRef"@keyup.enter.native="enterHandle"@focus="handleInputFocus"@blur="handleInputBlur"></el-input><div id="show" disabled><span>{{ barCode }}</span></div></div>
</template>
<script>
export default {props: {enterHandle: {type: Function,default: () => () => {},},},data() {return {barCode: '',};},methods: {handleInputBlur() {this.handleMymove('0');},handleInputFocus(e) {this.handleMymove('1');},handleMymove(num) {let style = document.createElement('style');document.head.appendChild(style);let sheet = style.sheet;sheet.addRule('#show:after', `opacity:${num};animation:${num==='0'?'null':'mymove 1.2s infinite'} `);sheet.insertRule(`#show:after{opacity:${num};animation:${num==='0'?'null':'mymove 1.2s infinite'}}`);},},
};
</script>
<style lang="less">
#show {padding-left: 14px;position: absolute;left: 2px;top: 50%;transform: translate(0, -50%);border: none;height: 30px;line-height: 30px;pointer-events: none;background: #fff;width: 98%;
}
#show:after {content: '';display: inline-block;height: 15px;position: relative;border-right: solid 1px #666;top: 2px;left: 1px;opacity: 0;
}
.pad-input {height: 28px;width: 100%;border: none;background: none;
}
@keyframes mymove {0% {opacity: 0;}25% {opacity: 0;}75% {opacity: 1;}100% {opacity: 0;}
}
</style>

父组件调用，传递一个子组件回车事件enterHandle

<template><el-form-x v-bind="formProps" @submit.native.prevent ref="form"><el-form-item label="分配单号" prop="paperCode" :wrapper-col="{ span: 6 }"><barcode-scan :enterHandle="handleAdd" ref="barcodeRef"></barcode-scan></el-form-item><div class="pseudo-form-item"><el-button type="primary" @click="handleAdd">添加 </el-button></div></el-form-x>
</template>
<script>
import barcodeScan from '../../components/barcode-scan.vue';
export default {components: {barcodeScan,},methods: {async handleAdd() {let barcodeRef = this.$refs.barcodeRef;if (!barcodeRef.barCode && !barcodeRef_data.barCode) {return this.$message.error('请输入单号');}this.formProps.model.paperCode = barcodeRef.barCode || barcodeRef_data.barCode;try {const { paperCode } = this.formProps.model;if (!paperCode) return;...//发送请求处理数据} catch (e) {e.data && this.$message.error(e.data.msg);}//请求完之后再自动去聚焦barcodeRef.$refs.barcodeScanRef.select();barcodeRef.$refs.barcodeScanRef.focus();barcodeRef.barCode = '';barcodeRef._data.barCode = '';},
};
</script>

这样就可以解决vue框架下面的扫描枪或者手动输入遇到的搜狗输入法兼容性问题

到了这里你以为就结束了么？过了不久，门店的人又来反馈了: 当鼠标聚焦时，"输入框"旁边会出现密码自动填充的弹窗，这是浏览器自带的，事情变的有趣了…
VUE扫码枪中文输入法兼容自动回车事件(下)

VUE扫码枪中文输入法兼容自动回车事件(上)相关推荐

vue input 中文输入法回车
vue input 中文输入法回车 <input type="text" class="tc-15-input-text" placeholder=&qu ...
中文输入法不触发onkeyup事件的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题. 具体表现是这样的: 当监听一 ...
input 中文输入法额外触发change事件问题
用ant mobile input 组件实现下面输入提示,提示添加click事件,input 添加change事件. 预期:点击提示项的时候,预期是只触发click事件. 实际:英文输入法正常,只触发 ...
使用中文输入法时对键盘事件的处理
最近很久没有更新博客了,不是没有东西写,而是没有时间写.公司项目上事情比较多,又在工会谋了份差事:家里房子装修,尽管有老爸盯着,但很多时候还是要自己跑来跑去.所以有时候有了写博客的想法,却老是坐不下来 ...
linux dwm 中文输入法,我最近在dwm上安装中文输入法fcitx。但是遇到了一些问题。...
我已经按照官方文档在图形界面启动配置文件里写好了改写的东西,也用fcitx-configtool 配置好了输入法,但是在图形界面下就是无法启动中文输入法是怎么回事? 以下信息是我运行fcitx-dia ...
vue 给页面添加enter回车事件 - 代码篇
vue 如何给页面添加enter回车事件? 主要代码: @keyup.enter.native="ajaxLoginApi()" 代码示例: <el-form ref=&qu ...
ios 中文输入法完成事件_compositionEnd 和 input 事件（中文输入法问题）
网上用 compositionstart + compositionend + input 解决中文输入法问题的办法 node.addEventListener('compositionstart', ...
input的中文输入法监听
在前端(html5)页面中监听input输入框中的值的变化,通常都逃不掉中文输入法的问题. 在使用中文输入法时,如何判断用户是直接输入还是间接输入呢? input的compositionstart和c ...
js 中实现扫码枪在中文输入法下扫码与实际差异的问题（大小写字母和数字的已没问题特殊字符还不知道咋处理所以没实现特殊字符）
在网上找了各种方法针对与扫码枪在中文输入法的情况下键入值异常(与实际不一致的问题)有说用type=password的来模拟text框用定位来覆盖(这种没啥用,看需要吧,因为搞完后没输入法如果从中间 ...

VUE扫码枪中文输入法兼容自动回车事件(上)

背景

解决方案

需求设计

代码

VUE扫码枪中文输入法兼容自动回车事件(上)相关推荐

最新文章

热门文章