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聚焦之后,弹出自带的键盘之后,内容往上移动的更多相关文章

  1. 移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

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

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

  3. wpf之Popup弹出自定义输入"键盘"

    在很多工厂的信息化MES系统中,车间的采集数据的机器是触摸屏电脑(工厂环境所限,用外接鼠标键盘反而不方便). 由于没有外接键盘,所以用户无法像坐在办公室一样,用鼠标键盘进行录入信息. 这时我们可以用w ...

  4. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  5. ArcGIS api fo silverlight学习三(利用ElementLayer实现鼠标悬浮弹出自定义窗体)

    接着上一节继续学习,本节主要是利用ElementLayer实现鼠标悬浮弹出自定义窗体 参考博文:http://www.cnblogs.com/luxiaoxun/p/3322218.html 一.新建 ...

  6. 实现android手机来电拦截系统页面弹出自定义页面特效

    如何实现android手机来电拦截系统页面弹出自定义页面特效, 首先:    我们需要注册一个监听来电的广播PhoneStateReceiver 类:其次:    在onReceive里面我们获取an ...

  7. android高德地图网络路径实现自定义marker并点击弹出自定义窗口

    android中使用地图的地方随处可见,今天记录一下网络路径生成自定义marker,点击标记弹出自定义的窗口(在这里使用的是高德地图) 在这里我们使用Grilde去加载网络图片,因为这个简直太方便了! ...

  8. input弹出的手机键盘搜索事件

    一.input的搜索框    在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标. <input id="search" ...

  9. 【WPF】右下角弹出自定义通知样式(Notification)——简单教程

    原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可.在Button的点击事件中 ...

随机推荐

  1. Finished yeah!

    终于到了最后的博客阶段,这时候才知道博客此时此刻是多么的惬意,它成了书写心声的自由平台!耗时一天完成这作业说起来也是蛮辛苦的,编译器需要新装,IDE需要熟悉,当然最主要的是之前浅入浅出的C++功底在此 ...

  2. centos mpeg acc 解码器安装

    # yum -y install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noar ...

  3. free命令详解

    free的命令详解   free命令可以显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区. 语法 free [选项] 选项 -b 以Byte为单位显示内存的使用情况 -k 以K ...

  4. 关于RabbitMQ Queue Argument的简介

    1.Message TTL message在队列queue中可以存活多长时间,以毫秒为单位:发布的消息在queue时间超过了你设定的时间就会被删除掉. channel.queueDeclare(&qu ...

  5. Lodop客户端本地角色注册号常见误区

    之前写过一篇关于Lodop和c-lodop注册号的区别:LODOP.C-LODOP注册号的区别第一种角色客户端本地打印角色是最常见的角色,最常见的场景,关于c-lodop云打印,它的第一种角色是取代L ...

  6. Lodop打印控件中PRINT_INITA()和PRINT_PAGESIZE()宽高

    Lodop中有两个初始化语句,PRINT_INIT()和PRINT_INITA(),PRINT_INITA()多了四个参数,前两个是整体偏移值,第三四参数是宽高,这个宽高是指打印设计可视化编辑区域的宽 ...

  7. linux-shell系列8 netstat用法

    1 查看TCP连接状态 netstat -n|awk '{print $6}'|sort|uniq -c|sort -rn netstat -n|awk '/^tcp/ {++S[$NF]};END{ ...

  8. BZOJ2006[NOI2010]超级钢琴——堆+主席树

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的 音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中 ...

  9. hdu 3397 Sequence operation (线段树 区间合并 多重标记)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=3397 题意: 给你一串01串,有5种操作 0. 区间全部变为0 1.区间全部变为1 2.区间异或 3.询问 ...

  10. Maven项目读取resources下文件的路径问题(getClassLoader的作用)

    读取resources下文件的方法 网上有问答如下:问: new FileInputStream("src/main/resources/all.properties") new ...