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. async await的前世今生

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  2. 【BZOJ2049】【LCT】Cave 洞穴勘测

    Description 辉 辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通 道组成,并且每条通道连接了 ...

  3. 字体圆润属性的使用-webkit-font-smoothing: antialiased

    字体渲染和抗锯齿技术 据称该属性在window下不起作用,不知win10如何,但是在OS和ios中会有不同的展示效果,主要也是展示在webkit内核中,以及android和ios中 大概是说字体渲染的 ...

  4. WCF服务对象实例化基础

    很多情况下,我们都需要控制wcf服务端对象的初始化方式,用来控制wcf实例在服务端的存活时间. Wcf框架提供了三种创建wcf实例的方式. WCF服务对象实例化基础 在普通的WCF请求和相应过程中,将 ...

  5. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  6. PHPMailer发匿名邮件及Extension missing: openssl的解决

    原文链接:http://www.tongfu.info/phpmailer%E5%8F%91%E5%8C%BF%E5%90%8D%E9%82 %AE%E4%BB%B6%E5%8F%8Aextensio ...

  7. IS打包

    1. 目的 让用户可以通过运行一个安装程序,安装程序到系统中正常运行. 2. 注意 当我们用项目向导生成的新项目时,InstallShield只为我们生成两个事件,分别是OnFirstUIBefore ...

  8. C#.NET快速开发框架-企业版V4.0截图打包下载

    C/S系统开发框架-企业版 V4.0 (Enterprise Edition) http://www.csframework.com/cs-framework-4.0.htm 其它图片打包下载: ht ...

  9. Python--模块微谈

    一个.py文件是一个模块,模块里面可以定义很多函数,载入模块就可以使用函数.模块又有python内置模块,又有第三方模块,不同模块里可以有相同的函数名和变量名,模块又可以组织到package里,不同的 ...

  10. 屏蔽手势UIGestureRecognizer 先后响应

    在iOS5一下对于手势的识别能力并不强,比如iOS6上面按钮的一个tap事件,最先接收的是uiview,并相应,而不是最上面的button,这时候就需要判断手势所在的位置和手势所在的控制器了 如下例子 ...