vue解决ios微信环境下点击输入框页面被顶起不能自动回弹到底部问题

蔚落 2022-02-16 13:15 213阅读 0赞

开发中遇到的这个问题，索性习惯的百度（哈哈），做微信h5页面的相信都有遇到过的，我这里记录一下。  
听说是**微信6.7.4以上，ios12+系统都会有键盘不回弹**

下面是一位道友的分享，我转发一下：[https://blog.csdn.net/YY110621/article/details/87919966][https_blog.csdn.net_YY110621_article_details_87919966]

问题效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70][]

下面灰色部分就是调起系统键盘的时候没有回弹（很丑吧）

**解决方法: **

**1.如下代码：在input标签上添加@focus="getFocus获取焦点事件（这是vue模式）**

**2.然后在methods钩子里定义这个方法**

getFocus() {
      //这里用到了jq类库
      $("input,textarea").on("blur", function() {
        window.scroll(0, 0);
      });
    },

实现原理：  
      原理就是弹起键盘的时候，window.scrollY会从0变到键盘的高度（例如：200），当输入框焦点失去后让scrollY回到0就好了。

[https_blog.csdn.net_YY110621_article_details_87919966]: https://blog.csdn.net/YY110621/article/details/87919966
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTY0NDQ2Mg_size_16_color_FFFFFF_t_70]: /images/20220216/2eb96d87cde34d4ca9506fac8c3a7cc8.png