input的focus事件

最近有个需求，移动端的app软件有一个扫条形码的功能，扫完之后需要将结果显示在input组件中，由于是设备本身自带的扫码按钮，因此无法监测扫码功能，

实现效果就是：input组件获取焦点focus，然后按设备本身的扫码按钮，就可以把结果显示在Input组件中了。

现实中的缺点：input组件focus时，键盘就会弹出，键盘弹出是为了在Input组件中输入内容，但是此时并不需要键盘弹出。

apicloud实现

<input type="text" placeholder="扫描产品编码查询信息" onchange="search(this)" onfocus="focusFn(this)">

onchange可以监测输入框输入内容，然后触发其他函数
onfocus可以监测输入框获取焦点事件，在这个里面可以改变键盘弹出事件

方法实现：

function focusFn(ele){
  $api.attr(ele,'readonly', 'readonly');
    setTimeout(() => {
      $api.removeAttr(ele,'readonly');
    }, 200);
};

方法原理：
监听到onfocus之后，给input添加一个只读的属性，则无法触发键盘弹出事件，然后200ms之后再移除只读属性。通过这200ms的时差，将键盘弹出事件阻止掉。
200ms的事件并不影响input的获取焦点。

vue实现

<input ref="productNum" type="text" placeholder="扫描产品编码" class="product-num" @change="fnStatus(productNum)" @focus="focusFn()" v-model="productNum">

方法实现：

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

原生js/jq实现

具体方法参照apicloud实现，除了获取dom和属性赋值的方式不同之外，思路是一样的。

完成！