MUI 当input聚焦之后,弹出自带的键盘之后,内容往上移动
1)有时候为了用户更好的体验,当input聚焦之后,手机自带的键盘弹出的时候,页面的内容也要跟着滚动,好让键盘不遮住input
只要把input标签放到mui-content这个类里面就可以了
<div class="mui-content">
<input />
</div>
2) 但是把input标签放入mui-scroll就不行了。
<div class="mui-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<input />
</div>
</div>
</div>
更新解决办法:
scroll区域滚动是用div来模拟的,自己也有滚动的方法与监听滚动距离的办法。那么当input被遮挡住之后,我可以强行让scroll滚动键盘高度的距离。这样就能解决遮挡了。
$("#focus").focus(function(){
mui('.mui-scroll-wrapper').scroll().scrollTo(0,y,100);
})
在我写的例子中,input滚动到屏幕底部,就是刚好不遮住input的位置的值为-1545,假设键盘高度为400,那么上面的y值就是 -(1545+400)即-1945。
最终结果:
如果input后面最多只有几十px的距离会不会影响失去焦点后整个页面的位置?经过测试是不会的。
如果想input失去焦点之后回到原来获取焦点的位置,那么可以保存最开始聚焦位置的值,blur的时候再让页面滚动到原来的位置就行了。
监听滚动距离的方法:
jq:
var scroll = mui('.mui-scroll-wrapper').scroll();
$('.mui-scroll-wrapper' ).on('scroll', function (e ) {
console.log(scroll.y);
})
js:
var scroll = mui('.mui-scroll-wrapper').scroll();
document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) {
console.log(scroll.y);
})
或者是这一种方法:
window.onresize=function(){
document.activeElement.scrollIntoView(false);
}
activeElement表示获得焦点的元素,scrollIntoView(),里面的参数是true或者省略的时候就是让该元素顶端对齐,false的时候是底端对齐,。scrollIntoView()也可以换成scrollIntoViewIfNeeded()。
上面这两种方式不知道在ios的效果如何,没测试过。
MUI 当input聚焦之后,弹出自带的键盘之后,内容往上移动的更多相关文章
- 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘
一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- wpf之Popup弹出自定义输入"键盘"
在很多工厂的信息化MES系统中,车间的采集数据的机器是触摸屏电脑(工厂环境所限,用外接鼠标键盘反而不方便). 由于没有外接键盘,所以用户无法像坐在办公室一样,用鼠标键盘进行录入信息. 这时我们可以用w ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- ArcGIS api fo silverlight学习三(利用ElementLayer实现鼠标悬浮弹出自定义窗体)
接着上一节继续学习,本节主要是利用ElementLayer实现鼠标悬浮弹出自定义窗体 参考博文:http://www.cnblogs.com/luxiaoxun/p/3322218.html 一.新建 ...
- 实现android手机来电拦截系统页面弹出自定义页面特效
如何实现android手机来电拦截系统页面弹出自定义页面特效, 首先: 我们需要注册一个监听来电的广播PhoneStateReceiver 类:其次: 在onReceive里面我们获取an ...
- android高德地图网络路径实现自定义marker并点击弹出自定义窗口
android中使用地图的地方随处可见,今天记录一下网络路径生成自定义marker,点击标记弹出自定义的窗口(在这里使用的是高德地图) 在这里我们使用Grilde去加载网络图片,因为这个简直太方便了! ...
- input弹出的手机键盘搜索事件
一.input的搜索框 在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标. <input id="search" ...
- 【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可.在Button的点击事件中 ...
随机推荐
- Finished yeah!
终于到了最后的博客阶段,这时候才知道博客此时此刻是多么的惬意,它成了书写心声的自由平台!耗时一天完成这作业说起来也是蛮辛苦的,编译器需要新装,IDE需要熟悉,当然最主要的是之前浅入浅出的C++功底在此 ...
- centos mpeg acc 解码器安装
# yum -y install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noar ...
- free命令详解
free的命令详解 free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 语法 free [选项] 选项 -b 以Byte为单位显示内存的使用情况 -k 以K ...
- 关于RabbitMQ Queue Argument的简介
1.Message TTL message在队列queue中可以存活多长时间,以毫秒为单位:发布的消息在queue时间超过了你设定的时间就会被删除掉. channel.queueDeclare(&qu ...
- Lodop客户端本地角色注册号常见误区
之前写过一篇关于Lodop和c-lodop注册号的区别:LODOP.C-LODOP注册号的区别第一种角色客户端本地打印角色是最常见的角色,最常见的场景,关于c-lodop云打印,它的第一种角色是取代L ...
- Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高
Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...
- linux-shell系列8 netstat用法
1 查看TCP连接状态 netstat -n|awk '{print $6}'|sort|uniq -c|sort -rn netstat -n|awk '/^tcp/ {++S[$NF]};END{ ...
- BZOJ2006[NOI2010]超级钢琴——堆+主席树
题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的 音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中 ...
- hdu 3397 Sequence operation (线段树 区间合并 多重标记)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=3397 题意: 给你一串01串,有5种操作 0. 区间全部变为0 1.区间全部变为1 2.区间异或 3.询问 ...
- Maven项目读取resources下文件的路径问题(getClassLoader的作用)
读取resources下文件的方法 网上有问答如下:问: new FileInputStream("src/main/resources/all.properties") new ...