tips: 该方案在 ios safri
上没用
扫码 pda
(android系统)里的 h5
页面,如何实现 input
框获取焦点的时候不会弹起手机键盘。网上针对 移动端不弹起手机键盘 基本有三种思路,使用 div
代替input
框 ,给 input
框设置readonly
属性, 当input
获得焦点时使用 blur
使其失去焦点,都满足不了 扫码枪
类似的设备需求,因为扫码设备一般是找到当前 h5
页面的 焦点元素
,将扫描到的码信息赋值给这个元素。
解决思路就是在这个 input
框获取焦点时(监听 focus
事件),将其设置为 readonly
,这时不会弹起键盘,然后马上将其 readonly
属性移除掉,经测试焦点还在,可以进行扫码接收码信息
<input type="text"
v-model="code"
ref="codeInput"
@focus="handleInputFocus('codeInput')"
@change="handleInputChange"
placeholder="验证码"/>
handleInputFocus(node) {
if (!node || !this.$refs[node]) {
return
}
this.$refs[node].setAttribute('readonly', 'readonly');
setTimeout(() => {
this.$refs[node].removeAttribute('readonly');
}, 200);
}
1 条评论
想想你的文章写的特别好https://www.ea55.com/