Vue微信网页开发，输入法顶开一部分屏幕的解决办法

前言：

1 这个输入法坑主要是在普通键盘和安全键盘的切换上，测试下来从账号切换到密码的安全键盘，比较老的安卓系统有概率屏幕被安全输入法顶开，苹果貌似也有这种问题。但是在我朋友的比较新的安卓系统上，却基本没有这种情况，同样我朋友升级了苹果系统，也基本不会出现这种情况，但毕竟不是人人手机的系统都比较新。

解决方法：

（1）最早看到有说给输入法的blur事件绑定一个跳转到顶端就可以解决，但实际用下来还是会有屏幕被顶开的情况，并且用户体验也不好。

inputLoseFocus(){
  setTimeout(() => {
    window.scrollTo(0, 0)
    // document.body.scrollHeight
  }, 500);
},

（2）我测试了几遍，基本上是输入法type=password时候，调用安全输入法出现的问题。那我们不用传统的type=password，只用type=text将输入框通过js显示为‘*’，也行就可以解决这个问题。上代码

<x-input required v-model="password"  style="border: 1px solid #41c7d6;" placeholder-align="left" placeholder="密码"  @keyup.native="mytest" ></x-input>//通过keyup，模仿做出type=password的效果

data(){
    return{
      password:'',
      username:'',
      str:''//str为中间值，接收password

    }
},

mytest(){
  if(this.password.substr(this.password.length-1,1) == '*'){
    this.str = this.str.substr(0,this.str.length-1)//通过substr，截取str，做到删除的效果
  }
  else if(this.password.length == 0){
    this.str = ''
  }
  else {
    this.str+=this.password.substr(this.password.length-1,1);
    this.password=this.password.replace(/./g,'*')//截取最后一个字符最后一位，累加str，并将password转化为*
  }

  console.log(this.str)
},

存在问题：如果使用中文输入法，输入中文密码，就达不到存取密码的效果。但是基本不会出现屏幕被输入法顶开的情况了。