移动端如何在前端阻止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使用focus 后第一次点击获取到焦点，系统键盘确实没弹出(是我需要的效果),但是在此点击时还会弹出，因此需要绑定click事件，里面执行的代码和foucs相同。

<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);
}

//隐藏input光标
<style>
input{
color:transparent;
text-shadow:0 0 0 red;
q？？}
</style>
4```