H5输入框挡住解决

原创 2016年05月31日 09:04:45

需求:

H5界面底部有个输入框,当键盘弹出的时候会把输入框挡住。

先说结论:

设置manifest中包含该webview的activity的属性:android:windowSoftInputMode="adjustResize"




解决基础:

基本原理还是使用系统的规则。

通过manifest中activity的属性:android:windowSoftInputMode="adjustPan"

这个属性的值,用的多的是adjustPan和adjustResize,这篇文章有图显示adjustPan和adjustResize的区别

http://www.cnblogs.com/fengzhblog/archive/2013/07/20/3202194.html


特例:

然而,adjustPan在H5页面底部获取输入焦点后,并不管用。adjustResize是可以起到作用的。(华为c8813)

猜测是由于H5页面与原生系统互动并不完美,系统的原因。

h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框

最近的项目做得是混合开发,其实比较尴尬的啦,手机端的安卓与ios挺多兼容问题的。 1、手机端h5页面中输入法键盘会遮挡输入框的问题。       $('input').on('focus',fun...

h5安卓浏览器,弹出框里的输入框被输入法挡住的问题

这个问题安卓手机有问题,ios系统是没问题的,只对安卓手机做了处理, 点击弹出框出来的时候,设置position: "absolute",这样输入的时候,弹出框还可以上下拉动 var u = nav...

手机网页中输入框被输入法遮挡问题

之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填。 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定...

H5 混合开发 输入法遮挡内容区域解决方法

webAPP开发过程中,android兼容性是一个头疼的问题,ios较好一些 输入法在开发中可能遇到的问题以及解决方法: 1.点击之后,输入法覆盖输入框: 在嵌入App中设置配置文件可以解决 ...

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

Native嵌套H5的那些事儿 列表内容 (1)native 的虚拟键盘弹出input 文本框上提及其置顶显示 解决方案1: 在各个的input输入框用标签包起来 例如: 解...

h5页面,输入法顶起页面底部div.(安卓有此问题,ios没问题)

问题背景:h5登录页,ios访问时点击input框的时候页面的高度不变,但是安卓访问的时候页面高度变小,底部的微信登录按钮(class="footer")会与input框重叠, 这个是转载的别人的...

【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题

【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题 状况 在iOS下,如果页面底部有个input输入框,那么在input获得焦点,弹出虚拟键盘时,有一定的几率,i...

解决h5中iphone手机input输入框被顶部地址栏盖住

当点击输入框调出输入法时,输入框的位置被顶到了地址栏的下面,解决方案如下:scrollIntoView 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法, ...
  • zfangls
  • zfangls
  • 2017年08月06日 12:47
  • 737

H5 ios input获取焦点挂起软键盘 输入框被遮盖 页面被顶起

挂起软键盘会导致页面高度增加  ios下 当input获取焦点时 获取当前窗口的高度 让当前页面的高度等于窗口高度 具体问题具体分析...

H5移动端弹出键盘时遮挡输入框

在写移动端时,如果使用绝对定位Fixed将输入框(input或者textarea),当手机的输入法为自带输入法时可能问题不大,但是当使用类似搜狗等输入法时,由于会高出自带输入法大约30个像素,就会造成...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5输入框挡住解决
举报原因:
原因补充:

(最多只允许输入30个字)