flex布局,input点击软键盘激活,底部按钮上移

安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了

body明显上移:

点击input修改价格:

软键盘出现:

先尝试了这样的方法:

http://blog.csdn.net/u010394015/article/details/72781377

给底部按钮position:relative

中间内容,其中是有滚动条,flex布局,container{height:100%;}

衍生:

点击input被键盘挡住

测试过多台真机发现安卓的手机都不会出现这个问题,个别的iOS手机有问题。而且同一型号的苹果有的有问题有的没有问题。经过多方的归纳、总结惊奇的发现:会出现这个bug的苹果手机,使用的都是苹果第三方输入法,而使用苹果自带的输入法则没有这个bug。

参考:http://news.hiapk.com/iphone/s59259659c113.html

时间: 2024-11-05 18:56:19

flex布局,input点击软键盘激活,底部按钮上移的相关文章

input页面居中,软键盘覆盖input

input框位于底部 对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动, input框位于顶部 这种情况不会出现问题, input居中+mui区域滚动, 此为巨坑,坑了我足足一天的时间, <div class="mui-scroll-wrappe"> <input /> </div> input居中且放于区域滚动中,获取焦点,软键盘遮盖iput,input输入值才把页面滚动上去

[Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,运行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决办法

这个现象只出现在phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其它js框架我测试了几个(app framework, jquery mobile),好像没有这个问题. 我来描述一下这个现象: 1.运行phonegap打包的wp8程序,打开一个有输入框的界面,如下图: 2.点击输入框,使其弹出软键盘,界面会上移,如下图: 3.点返回键隐藏软键盘(或者点击界面上其它地方隐藏软键盘),此时界面不恢复原位,如下图: 我的一些研究结果: 1.这种现象只出现

Android动态改变布局,比如登陆弹出软键盘,登陆框上移(转载)

Android动态改变布局 http://www.cnblogs.com/angeldevil/p/3836256.html 遇到这么个需求,先看图:      其实是一个软件的登录界面,初始是第一个图的样子,当软键盘弹出后变为第二个图的样子,因为登录界面有用户名.密码.登录按钮,不这样的话软键盘弹出后会遮住登录按钮(其实之前的实现放到了ScrollView里面,监听软键盘弹出后滚动到底部,软键盘隐藏后滚动到顶部,也是可以的). 最简单的方法就是多加几个冗余的View,根据软键盘的状态隐藏不需要

禁止移动端input弹出软键盘

在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> <input type="text" id="disable1" class="" placeholder=""/> </div> <div> <input type="tex

vue 手机键盘把底部按钮顶上去

背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. 实现原理:当页面高度发生变化的时候改变底部button的样式,没点击前button在底部固定position: fixed;当我点击input的时候样式变成position: static!important; 一开始的解决方案是通过input的聚焦和失焦,但是有个问题,当我点击input的时候聚焦,再点击键盘上的隐藏按钮时就没办法恢复原来的fixed. 原来的样式主要是positio

input输入时软键盘回车显示搜索

很多时候我们会看到输入法里面回车是搜索等字眼,今天我们就来实现这个效果 原本的效果: <form action=""> <input type="search" value='搜索'> </form> 只需要以上几行代码即可实现,不信?试试看吧

【转】Android点击空白区域,隐藏输入法软键盘

原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步对软键盘进行隐藏.为了更好的体验,我们可以实现当用户使用完毕软键盘时.点击空白区域即可实现隐藏的功能.效果如图所示: 代码实现 代码块语法遵循标准markdown代码,例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

android 点击关闭软键盘

在项目中,editText获取焦点后,会自动弹出软键盘,关闭的时候一般需要按返回键或者点击软键盘上的按钮, 即使当前activity已经finish掉,软键盘依然存在,会影响用户的体验. 网上目前有很多很详细的办法,比如点击其他空白区域,软键盘就会消失之类的方法,我们项目中没有要求这个,要求的是只要 不遮挡其他操作,还有当前Activity关闭掉后软键盘消失就行, 今天给大家分享两个办法: //此方法,如果显示则隐藏,如果隐藏则显示 private void hintKbOne() { Inpu

Android--点击EditText的时候弹出软键盘,点击EditText之外空白处软键盘消失

在android中点击EditText的时候会弹出软键盘,但当我们输入完毕或者想隐藏软键盘时,我们可以点击软键盘上的隐藏按钮,这种方法固然可行,但是为了提高用户体验,我们常常要实现这种功能:当输入完毕后想隐藏软键盘时我们通过直接点击EditText的之外的其他空白处就可以隐藏软键盘,这种做法明显比点击软键盘自身的隐藏按钮要方便的多. 要实现上述功能只需重写 public boolean onTouchEvent(MotionEvent event)方法,做相应软键盘隐藏的处理操作即可. Inpu