300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html5手机底部输入框 html5 虚拟键盘弹出挡住底部的输入框解决方案

html5手机底部输入框 html5 虚拟键盘弹出挡住底部的输入框解决方案

时间:2023-08-30 10:12:18

相关推荐

html5手机底部输入框 html5 虚拟键盘弹出挡住底部的输入框解决方案

问题描述:

我们使用 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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。