移动端如何在前端阻止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框变为只读后就可以不唤起键盘，但是实际上焦点还是在这个输入框上的，我们只需要马上把它的只读属性去掉，焦点还在，可以接收扫码枪的值，又不会唤起键盘，完美解决问题。

原文链接：https://blog.csdn.net/DACBE/article/details/89343053