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);
}
最后修改：2020 年 03 月 18 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~