问题描述:
我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的部分不会自动下移,体验不是很好。
解决方案:
可以借助元素的 scrollIntoView()方法。scrollIntoView()可以在所有的HTML元素上调用。调用该方法后,则被调用的元素会出现在视图窗口中,并且元素会和视图窗口的顶部齐平。
代码实例:
问题:页面中有一个textarea 在页面的底部,软键盘弹出时会遮挡住textare.
解决思路:
1. 在textarea focus时调用scrollIntoView()方法
2. 软键盘关闭后,即获取到textarea blur 时将页面滚动到顶部(解决ios 页面不自动下移的问题)
3. 代码如下:
function focusBlur(state){
if(state == focus){
// document.querySelector( extarea).scrollIntoView();
}else{
window.scroll(0,0); //页面返回到顶部
}
}
Android 虚拟键盘弹出把底部栏顶上去的解决办法
在AndroidManifest中使用ActivityGroup的activity中加上:android:windowSoftInputMode="adj