一、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输入框或任何输入框聚焦后页面自动上移的更多相关文章

  1. 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目

    项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...

  2. mui框架中底部导航的跳转1

    mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...

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

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

  4. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  5. mui框架中dialog框的实现

    <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...

  6. 在MUI框架中使用video.js插件,并在暂停的时候利用Asp.net将观看时长保存到sqlserver数据库

    本次保存数据的情况有三种: 在视频播放的时候点击暂停,将本视频的进度保存到数据库 利用mui内部的控件,返回上一页操作时,进行保存 安卓手机触发返回键的时候,进行保存 示例一: 在video标签上面添 ...

  7. mui框架中底部导航的跳转2

    接上一篇 还有一种方法就是在一心得页面中打开我们所需要的网页 代码如下: 向新的的页面穿值: 获取到新页面上的值:

  8. js-移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

  9. WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...

随机推荐

  1. PHP上传文件时,文件过大$_FILES为空

    在php中判断上传文件的大小,但是文件一但过大,print_r($_FILES);的值就变为null了,有时候大家会遇到这么一个问题,上传小文件时,PHP能正常获取到,但是文件一超过8M就变为空了,我 ...

  2. FusionCharts Free 甘特图

    用FusionCharts做甘特图 1.同步方式(用xml格式字符) 前台aspx代码 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  3. [转]text和content方法的区别

    r.text str #字符串方式的响应体,会自动根据响应头部的 字符编码进行解码 r.content bytes #字节方式的响应体,会自动为你解码 gzip 和 deflate 压缩 reques ...

  4. 使用TextTest来做认定测试——本质是通过diff对比程序的运行log输出,来看测试结果和预期结果是否相同

    Welcome to TextTest.org! TextTest is an open source tool for text-based functional testing. This mea ...

  5. Java(一)——认识Java语言

    1.Java语言简介 Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言,具有卓越的通用性.高效性.平台移植性和安全性.Sun 公司对 Java 编程语言的解释是:Java 编程语言是个简单 ...

  6. 我的CSDN博客

    从csdn搬过来的: csdn地址:http://blog.csdn.net/WR_technology

  7. blog.codedream.ren

    博客将转到 CodeDream  ,新的链接是 http://blog.codedream.ren

  8. Opencv— — Twirl Filter

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  9. 【转】BZOJ4066(kdtree)(占位)

    https://www.cnblogs.com/OYzx/p/5506468.html BZOJ2863:(允许离线) 题目大意:给定一个n*n的矩形,以及若干个操作,操作有如下两种: 1.给矩形的( ...

  10. 算法实现c语言--02

    从键盘上输入字符,将小写字母转换成大写字母.输入“ctl + z” 结束 . #include<stdio.h> #include<stdlib.h> //从键盘上输入字符,将 ...