h5嵌在一个iOS版的app里,软件盘收起后,页面无法回到原位置下面有空白

h5嵌在一个iOS版的app里,软件盘收起后,页面无法回到原位置下面有空白

   <input type="number" placeholder="手机号码" v-model="mobile" @blur="blurAdjust" />

方法一、

    blurAdjust () {
      window.scroll(0, 0)
      window.body.scroll(0, 0)
    },

方法二、

    blurAdjust () {
      // 将滚动拉到底
       setTimeout(() => {
        let scrollHeight =
        document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
       }, 100)
    },

方法三、

    blurAdjust () {
       document.body.scrollTop = 0
       document.documentElement.scrollTop = 0
    },

方法四、

   created () {
    this.goDown()
  },
  methods: {
    goDown () {
      window.scroll(0, 0)
      document.body.addEventListener('focusout', () => {
        setTimeout(function () {
          let scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      })
    }
  }

方法五、直接放在App.vue里或者index.html里

  <script type="text/javascript">
     document.body.addEventListener("focusout", () => {
          setTimeout(() => {
              const scrollHeight =
                  document.documentElement.scrollTop || document.body.scrollTop || 0;
              window.scrollTo(0, Math.max(scrollHeight - 1, 0));
          }, 100);
      });
  </script>

以上五种方法都尝试过了,这几种方法完全可以解决h5页面在微信里软键盘弹出页面无法回落的问题。
在微信或这浏览器里遇到软件盘收起的小伙伴们,可以参考上面方法。
我之前如果尝试了以上所有方法都没有作用:纠结惆怅了许久,后来发现是合作方app的问题。
总而言之:解决这个死愁人的bug,好开心!😄😄😄😄😄😄😄😄😄😄希望你帮到困惑中的你👉

如果你在 iOS App 中使用 `UIWebView` 或 `WKWebView` 来H5 页面,那么你可以在 iOS App 中的生代码中监听键盘弹起事件,然后通过调整标题栏的位置来实现固定。 具体实现步骤如下: 1. 在 iOS App 中的生代码中,监听键盘弹起事件,并获取键盘高度: ```objective-c // 监听键盘弹起事件 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; // 键盘弹起事件处理函数 - (void)keyboardWillShow:(NSNotification *)notification { NSDictionary *userInfo = notification.userInfo; CGRect keyboardFrame = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue]; CGFloat keyboardHeight = keyboardFrame.size.height; // 在这调整标题栏的位置 } ``` 2. 在 H5 页面中,给输入框添加 `focus` 事件监听器,在焦点元素是输入框时向 iOS App 发送消息: ```javascript // 添加 focus 事件监听器 var input = document.querySelector('input'); input.addEventListener('focus', function() { // 向 iOS App 发送消息 window.webkit.messageHandlers.keyboardWillShow.postMessage(null); }); ``` 3. 在 iOS App 中的生代码中,接收来自 H5 页面的消息,并调整标题栏的位置: ```objective-c // 在 viewDidLoad 函数中添加以下代码,用于接收来自 H5 页面的消息 WKUserContentController *userContentController = [[WKUserContentController alloc] init]; [userContentController addScriptMessageHandler:self name:@"keyboardWillShow"]; WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]; configuration.userContentController = userContentController; self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration]; [self.view addSubview:self.webView]; // 接收来自 H5 页面的消息 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"keyboardWillShow"]) { // 在这调整标题栏的位置 } } ``` 4. 在 iOS App 中,通过调整标题栏的位置来实现固定。具体实现方式根据你的标题栏实现方式而定,一般可以通过修改标题栏的 `frame` 属性来实现。 需要注意的是,这种方法只适用于在 iOS App 中使用 `UIWebView` 或 `WKWebView` 来H5 页面的情况。如果你是在浏览器中打开 H5 页面,那么无法通过生代码来监听键盘事件,需要通过 CSS 或 JavaScript 等技术来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值