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 日
如果觉得我的文章对你有用,请随意赞赏或留下你的评论~