移动端如何在前端阻止input框获得焦点时手机键盘的弹出

        在文章的开始,我先把我的目的说明一下:在移动端,如何在前端实现input框获得焦点的同时不会唤起手机键盘。        

        在做公司项目的时候遇到这样一个问题,因为项目需要在ubuntu、window、android端都可以执行,其中ubuntu环境下是没有键盘的,而且为了方便对输入的内容有所控制,我们用vue分别写了一个数字键盘和一个英文键盘,input框都用div代替了,就是为了防止在android端的手机键盘的弹出。本以为没有什么大不了的事,可最终还是出了问题,问题源于USB扫码枪!!!

        先说一下原因,我们项目的扫码枪分为三种,串口、USB、本机(手机、pos机摄像头),其中串口和本机设备需要调用后台接口(项目是一个前后端打包在一起的Electron应用),扫码处理都在后台驱动,但是USB设备比较独特,它非常方便,不用后台代码驱动,实际上就像键盘一样是一个输入设备,就像键盘在input框里输入一样,会把扫到的结果直接输入到input框里。问题就出在这里,在驱动USB扫码枪的时候必须有一个input框去接扫到的数据,但这样必定会使input框获得焦点,在移动端唤起手机键盘。   

        网上查了很多资料,发现很多人都跟我有一样的需求,有不少是因为这个USB扫码枪引起的,但是网上的回答大都自以为是,根本没有弄清诉求,不外乎三种解决方法,把input框用div代替、给input框设readonly属性、input获得焦点时使其失去焦点,这些谁都能想到的方法根本解决不了问题,那么该如何解决这个问题呢?

<input type="password" v-model="scannerMessage" ref="scanTextbox" @keyup.13="scannerByUsb" @focus="stopKeyborad">
stopKeyborad () {
  this.$refs.scanTextbox.setAttribute('readonly', 'readonly');
  setTimeout(() => {
    this.$refs.scanTextbox.removeAttribute('readonly');
  }, 200);
}

        先贴代码,应该很容易理解。

        在输入框获得焦点的时候,触发事件给其加一个readonly属性,input框变为只读后就可以不唤起键盘,但是实际上焦点还是在这个输入框上的,我们只需要马上把它的只读属性去掉,焦点还在,可以接收扫码枪的值,又不会唤起键盘,完美解决问题。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页