当前位置:   article > 正文

手机端ios弹出键盘再收起后背景图被顶起--解决方案_ios 键盘回收后界面

ios 键盘回收后界面

问题描述:如图所示,在h5页面,当调出键盘输入完毕并使键盘收回后,整个页面的背景图片会被顶起,且点击按钮函数无法被触发

 

原因:ios12系统键盘收回后会留下一个透明的遮罩层,在最上面一层,此时点击无背景图处的按钮,只点击到了遮罩层,所以无法触发按钮

 

解决方案:此时背景图向上移动了一段距离,于是可以在失去焦点后,使页面进行滚动(这样可以去除遮罩层),由于背景图片全局覆盖,所以滚动到0,0坐标位置

<input type="text" name="" value="" v-model='newInfo.name' placeholder="请输入姓名" @focus="inputFocus($event)" @focusout="inputFocusout">
  1. data:(){
  2. return{
  3. timer:null
  4. }
  5. },
  6. methods:{
  7. inputFocus(){
  8. clearTimeout(this.timer)
  9. },
  10. inputFocusout() {
  11. this.timer = setTimeout(() => {
  12. window.scrollTo(0,0)
  13. console.log('333')
  14. },10)
  15. },
  16. },
  17. destroyed() {
  18. clearTimeout(this.timer)
  19. },

 

 

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号