移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

Posted 心之所向便是光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移相关的知识,希望对你有一定的参考价值。

一、mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移

实现方法:

(1)只要把input标签放在mui-content这个类里面就可以了

<div class="mui-content">
    <input .../>
</div>

注意:在有些情况下不适用,当把input标签放入mui-scroll中就不行了,也就是说mui-content和mui-scroll同时存在时不适用

<div class="mui-content">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
      <input ... />    
     </div>
    </div>
</div>

(2)使用js方法进行解决,在body中添加

<body onresize="document.activeElement.scrollIntoView(true);">

注意:表单不能添加padding和margin样式,不然回滚会反弹

以上是关于移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移的主要内容,如果未能解决你的问题,请参考以下文章

MUI框架之输入框Input

跨平台移动端APP开发---简单高效的MUI框架

网页端实现input数字输入框

低价结合MUI框架完成HTML5移动端混合应用开发(微信实战)

移动端H5输入框踩坑总结

移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)