input页面居中,软键盘覆盖input
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的更多相关文章
- 页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景
微信浏览器在版本6.7.4及以上会有这个bug:页面的input唤醒软键盘再收起后,页面会出现软键盘高度的空白背景,触摸到滚动条会消失恢复! 解决代码 后台框架嵌入iframe的情景,iframe内部 ...
- IOS下 input 被软键盘方案遮盖问题解决
前言: 并没有完美解决 ! 场景: 最近在做企业微信H5的一个项目,里面有个动态列表页,开始输入框是隐藏的,点击评论才会出现并让 input 聚焦.经过测试在安卓上面应该没什么问题,但是iOS上面会出 ...
- ios safari input fixed 软键盘里的爱恨情仇
请看第一题: 为什么我的input获取焦点后,被输入法遮住了. 解决办法: 源码: <!DOCTYPE html> <html lang="en"> < ...
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- cursor-spacing 软键盘和input的距离
指定光标与键盘的距离,单位 px .取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离. 例: 软键盘和input的距离300px
- 关于点击input框唤醒键盘导致input被遮盖的问题
关于点击input框唤醒键盘导致input被遮盖的问题 这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次.之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- 手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)
转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1 用定位为题来解决var oHeight = $(document).height(); // ...
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
随机推荐
- 334. Increasing Triplet Subsequence My Submissions Question--Avota
问题描述: Given an unsorted array return whether an increasing subsequence of length 3 exists or not in ...
- 最优雅的C++跟lua交互.
我先来吐槽一下我们这个项目. 我是做手机游戏的, cocos2dx引擎, lua编码. 这本来是一件很欢快的事情, 因为不用接触C++. C++写久了的人写lua, 就会感觉任督二脉被打通了, 代码写 ...
- 自己制作精美的App Store 软件截屏
当用户搜索到App的时候,一般都会先看截图,如果截图效果不好,可能用户就不会下载. 不想自己辛苦写的认为还不错的软件,因为截图的原因,而降低了很多下载量吧. 轻轻松松做出这样高大上的截屏效果来. Sc ...
- OA系统权限管理设计方案学习
学习之:http://www.cnblogs.com/kivenhou/archive/2009/10/19/1586106.html 此为模型图: 据此写了sql语句: drop table if ...
- ThinkPHP接入支付宝支付功能
最近做系统,需要实现在线支付功能,毫不犹豫,选择的是支付宝的接口支付功能.这里我用的是即时到帐的接口,具体实现的步骤如下: 一.下载支付宝接口包 下载地址:https://b.alipay.com/o ...
- pycharm常用快捷键与设置
pycharm高频率使用的快捷键 Ctrl+Shift+F10 运行当前的页面 Ctrl + / 注释(取消注释)选择的行 Ctrl+Shift+F 高级查找 Shift + Enter 开始新行 T ...
- 转:《IIC时序》
I2C(Inter-Integrated Circuit)总线是一种由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.I2C总线产生于在80年代,最初为音频和视频设备开发,如今主 ...
- BZOJ 1055 玩具取名
Description 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用“WING”中任意两个字母代替,使 ...
- Pots
poj3414:http://poj.org/problem?id=3414 题意:给你两个罐子的体积,然后让你只用这两个罐子量出给定k体积的水.题解:这里可以把两个罐子看成是一个二维的图,然后体积的 ...
- KVM如何以HADOOP作共享存储?
看到西部数码的作法. 回想IBM的SMARTCLOUD作法,这主要就是应用了HDFS? 外加上HBASE和ZOOKEEPER保驾的? 然后,再想到,这HDFS和OPENSTATCK的SWIFT...纠 ...