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

作者 Hpyer 日期 2020-09-10
移动端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);
}