移动端H5页面阻止输入框获取焦点时弹出软键盘

先说下我遇到的需求吧。首先设备是安卓系统，浏览器为chrome，因为默认的输入设备是扫码抢（原理类似键盘，即在焦点处填入扫码所得的结果，并自动加上回车），所以要求一个输入框，在获取焦点的时候不要自动弹出软键盘，但是，在需要的时候还可以在调出软键盘来完成输入。

求助度娘、谷哥了很久，但是找了很多资料，提到的方案无非是三种：1、用div模拟；2、加readonly属性；3、输入框onfocus的时候执行document.activeElement.blur()来失去焦点。但不难发现，这几种方法虽然屏蔽了软键盘，可同时也无法获取焦点。

就快放弃，准备转原生解决方案的时候，无意间在csdn上发现了这篇文章《移动端如何在前端阻止input框获得焦点时手机键盘的弹出》，终于解决了这个问题。

先来看代码吧

vue template:

<input type="password" v-model="scannerMessage" ref="scanTextbox" @focus="stopKeyborad">

vue method:

stopKeyborad () {
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

它的原理也简单，也是利用readonly属性。在输入框获取焦点的时候，给输入框添加readonly属性，200毫秒后移除readonly属性即可。

虽然这方法可以解决问题，不过依赖输入框的ref，实际项目中使用可能会不太方便。我们只需要稍作调整，利用事件对象的target属性即可改造成通用的方法。这样，在需要阻止弹处软键盘的输入框上绑定onfocus事件上即可。

vue method:

stopKeyborad (event) {
  event.target.setAttribute('readonly', true);
  setTimeout(() => {
    event.target.removeAttribute('readonly');
  }, 100);
}

• ← Previous Post
• Next Post →