iOS webview html5 移动端 软键盘d起遮挡输入框

iOS webview html5 移动端 软键盘d起遮挡输入框,第1张

移动web聊天页面,输入框在底部的时候,点击输入,d起软键盘,iOS在将页面推上的时候会回d一下,导致键盘刚好遮挡到输入框。

初次触发输入框的focus的时候,iOS 键盘默认是以英文键盘高度推上页面,但一般我们的默认输入是中文,会导致软键盘的高度变化,中文输入键盘高度高于英文,所以导致了遮挡。

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 此方法是标准的 Element.scrollIntoView() 方法的专有变体。

当键盘在切换中英输入法时,键盘高度变化仍然会引起键盘遮挡

监听输入框的 focus 、 blur 事件,当聚焦时,循环调用 input.scrollIntoViewIfNeeded 方法。

当监听到 blur 时,停止循环。

HTML页面 input框获取焦点的时候会被键盘挡住是因为键盘高度设置不当导致。

解决办法:把键盘高度设置一下 或者把手机键盘设置成悬浮状态。

获取输入法高度的方法:

当d出输入法时,在html页面上,webview的高度会自动减少,留出空间给软键盘。

那么输入法高度=屏幕高度-状态栏高度-webview高度

在小米note上,默认输入法高度是 863px。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7007837.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-31
下一篇 2023-03-31

发表评论

登录后才能评论

评论列表(0条)

保存