input框位于底部

对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动,

input框位于顶部

这种情况不会出现问题,

input居中+mui区域滚动,

此为巨坑,坑了我足足一天的时间,

<div class="mui-scroll-wrappe"> <input /> </div>

input居中且放于区域滚动中,获取焦点,软键盘遮盖iput,input输入值才把页面滚动上去,

测试1,获取焦点后设置定时器,自动填充值模拟软键盘输入值,结果(失败);

测试2,要让input正好位于软键盘上方,无空隙,经试验是由bottom决定的,input又要居中,故只能设置position:absolute;bottom 0%;margin-bottom 50%(依照input高决定);

margin-bottom的单位1是页面高度,,故得到的位置也不会绝对的居中。。然本人无法发现更好的办法,望大牛指教一二。

input页面居中,软键盘覆盖input的更多相关文章

  1. 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景

    微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...

  2. IOS下 input 被软键盘方案遮盖问题解决

    前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...

  3. ios safari input fixed 软键盘里的爱恨情仇

    请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> < ...

  4. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  5. cursor-spacing 软键盘和input的距离

    指定光标与键盘的距离,单位 px .取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离. 例: 软键盘和input的距离300px

  6. 关于点击input框唤醒键盘导致input被遮盖的问题

    关于点击input框唤醒键盘导致input被遮盖的问题 这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次.之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化 ...

  7. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  8. 手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)

    转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1  用定位为题来解决var oHeight = $(document).height(); // ...

  9. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...

随机推荐

  1. 【转】 UIView如何管理它的子视图

    原文:http://my.oschina.net/u/1984662/blog/293690 目录[-] Core Animation基础 改变视图的层 动画支持 视图坐标系统 边框.边界.和中心的关 ...

  2. 十、C# 异常处理

    1.多异常类型 2.捕捉异常 3.常规catch块 4.异常处理的指导原则 5.定义自定义异常   1.多异常类型 代码要引发任何异常,只需为要引发的异常实例实例附加关键字throw作为前缀.具体选择 ...

  3. 【POJ1195】【二维树状数组】Mobile phones

    Description Suppose that the fourth generation mobile phone base stations in the Tampere area operat ...

  4. request 报错The remote server returned an error: (415) Unsupported Media Type.

    开发时遇到个问题,程序访问数据库数据,给服务器发送请求时,老是报错,返回的错误页面是: HTTP Status 415 - Unsupported Media Type type Status rep ...

  5. C#DateTimePicker设置自定义格式

    摘自Microsoft TechNet DateTimePicker.CustomFormat 属性 包含日期和时间分隔符的显示字符串文字或格式字符串,必须在子字符串中使用转义符. 例如,若要显示将日 ...

  6. Json串到json对象的转换

    JSON(JavaScript Object Notation) JS对象符号 是一种轻量级的数据交换格式 JavaScript eval()函数实现 (一) 标准格式 function JsonFo ...

  7. Android Fragment基础及使用

    同一个app内的界面切换 用Fragment比较合适,因为Activity比较重量级 Fragment 轻量级,切换灵活 --------------------------------------- ...

  8. how to make choices about girls?

    yb ldge nvhl, yige hf csmn, hv bmig, hv zofj, hfyb uhjnxn;ldyige ybdm bfbfde, gjjt hf djip, djui hfk ...

  9. JavaScript解析机制

    JavaScript是一种解释型语言,按照<script>块儿来预编译和执行. JavaScript解释器在预编译阶段,先预声明变量,再预声明函数.在执行阶段,进行变量赋值,和函数执行. ...

  10. NandFlash驱动框架

    1.首先和前面的几个驱动程序相似,需要分配一个nand_chip结构体 s3c_nand = kzalloc(sizeof(struct nand_chip), GFP_KERNEL); 然后填充该结 ...