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...
  • github_35549695
  • github_35549695
  • 2016年11月19日 17:22
  • 11921

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

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

H5输入框挡住解决

需求: H5界面底部有个输入框,当键盘弹出的时候会把输入框挡住。 解决基础: 基本原理还是使用系统的规则。 通过manifest中activity的属性:android:windowSof...
  • Tyrael1009
  • Tyrael1009
  • 2016年05月31日 09:04
  • 1704

WebView 中 H5 页面的软键盘遮挡输入框

如题,WebView 中 H5 页面的软键盘遮挡输入框,于是在 AndroidManifest.xml 中该 Activity 中 添加如下代码:android:windowSoftInputMode...
  • CHITTY1993
  • CHITTY1993
  • 2017年07月23日 21:01
  • 1389

H5问题总结

搜索键盘与事件绑定 input type="search"即可调用搜索键盘 但是有时候键盘回车键并不一定具有“搜索”或“前往”字样,需要将input包裹在form中,有时还需要填上action属性(仍...
  • panying0903
  • panying0903
  • 2016年09月01日 14:13
  • 402

记录H5页面IOS中input输入框失去焦点后,键盘隐藏

//问题描述:安卓下无此问题,在ios自带的浏览器中,H5页面在input输入获取焦点后键盘弹出,随便触碰一个地方要使键盘隐藏 //解决方案:如下 jQuery("body").on("touch...
  • baidantop
  • baidantop
  • 2018年01月16日 16:25
  • 147

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

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

安卓手机访问h5页面的input,弹出软键盘遮挡input

var bindAndroidScroll =function(that){ // that 输入框 if(myApp.device.android || (myApp.device.ios && ...
  • yan170772286
  • yan170772286
  • 2016年03月22日 09:33
  • 9207

html页面在手机中点击输入框调出键盘页面内容上移的粗暴解决办法

在混合开发中遇到的问题,就是h5页面在手机中,点击出来模态框,点击了模态框中的输入框时候会调出手机键盘,这时候模态框会上移,尺寸也会变小,具体原因不是很清楚,但是由于是移动开发,页面的宽度和高度都是以...
  • nn_nana
  • nn_nana
  • 2017年02月10日 13:49
  • 4514

h5 安卓 软键盘弹出 布局压缩

webapp 使用百分比布局高度,再安卓机器上,点击input软键盘弹出会压缩整个布局 增加下面一句可以完美解决: $(document).ready(function () { $('...
  • qq_16165281
  • qq_16165281
  • 2017年03月30日 10:01
  • 1342
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5输入框挡住解决
举报原因:
原因补充:

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