html5手机网页开发,中文输入法下软键盘遮挡输入框
安卓手机解决办法
微信UI框架weui中给出了解决方法:
weui框架
http://weui.github.io/weui/example.js
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug // 相关 issue: https://github.com/weui/weui/issues/15 // 解决方法: // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element // Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把 if (/Android/gi.test(navigator.userAgent)) { window.addEventListener(\'resize\', function () { if (document.activeElement.tagName == \'INPUT\' || document.activeElement.tagName == \'TEXTAREA\') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded(); }, 0); } }) }
iphone手机解决方法
1、用手机自带输入法的情况下不会出现此问题
2、手机安装搜狗输入法,百度输入法(只测过这2个)还是会出现此问题,再是没找到好的方法
支持浏览器如下:
详情:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
版权声明:本文为liulinjie原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。