移动端实现：input组件focus之后，阻止键盘弹出(apicloud和vue两种实现方法)

ゝ一纸荒年。 2021-07-25 23:53 1175阅读 0赞

## input的focus事件 ##

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

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

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

## apicloud实现 ##

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

方法实现：

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

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

## vue实现 ##

方法实现：

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

## 原生js/jq实现 ##

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

完成！