移动端 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输入框或任何输入框聚焦后页面自动上移的更多相关文章
- 基于easyui框架中input 类型的checkbox拼接成字符串存入数据库和读取选中---善良公社项目
项目中我做修改用户个人资料的时候,有一个需求是帮助人员的帮助类型如图下所示: 当初想如果是asp.net控件的话应该很简单实现,如果不是基于easyUI框架那就太简单了,现在是受框架的限制与是前端ht ...
- mui框架中底部导航的跳转1
mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- 解决移动端在IOS中input输入框光标过长
在输入框样式中加入: line-height:20px;
- mui框架中dialog框的实现
<script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...
- 在MUI框架中使用video.js插件,并在暂停的时候利用Asp.net将观看时长保存到sqlserver数据库
本次保存数据的情况有三种: 在视频播放的时候点击暂停,将本视频的进度保存到数据库 利用mui内部的控件,返回上一页操作时,进行保存 安卓手机触发返回键的时候,进行保存 示例一: 在video标签上面添 ...
- mui框架中底部导航的跳转2
接上一篇 还有一种方法就是在一心得页面中打开我们所需要的网页 代码如下: 向新的的页面穿值: 获取到新页面上的值:
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...
随机推荐
- html5--5-2 绘制直线
html5--5-2 绘制直线 学习要点 如何在HTML5文档中添加canvas元素 canvas的属性 了解canvas坐标系 了解script元素 绘制一条直线(准确的说是线段) 什么是canva ...
- 使用TextTest来做认定测试——本质是通过diff对比程序的运行log输出,来看测试结果和预期结果是否相同
Welcome to TextTest.org! TextTest is an open source tool for text-based functional testing. This mea ...
- Web前端行业的了解
即将从事Web前端的工作的 先对即将从事的行业有个了解. Web前端发展史: 第一个网页诞生于90年代初,早期的网页除了一些小图片和毫无布局可言的标题段落,其全由文字构成.然而随着时代的进步,互联网的 ...
- Java中的final和static
final final可以用在类.方法.变量上. 1.final用在类上,表明当前类它不能被继承,没有子类. 2.final用在方法上,表明当前方法不能被override,不能被重写. 3.final ...
- ROM的分类
转载自:http://www.ic37.com/htm_tech/2012-5/82774_23811.htm ROM(只读存储器)按其内容写入方式,一般分为3种:固定内容ROM:可一次编程PROM: ...
- lsyncd实时同步搭建指南——取代rsync+inotify
1. 几大实时同步工具比较 1.1 inotify + rsync 最近一直在寻求生产服务服务器上的同步替代方案,原先使用的是inotify + rsync,但随着文件数量的增大到100W+,目录下的 ...
- 【eclipse插件开发实战】 Eclipse插件开发6——eclipse在线翻译插件Translator开发实例详解
Eclipse插件开发6--eclipse在线翻译插件Translator开发实例详解 在上一篇文章中讲到了一个简单的eclipse插件开发实例,主要是对插件工程的基本创建步骤进行了讲解,这篇文章当中 ...
- 【Linux学习】Linux文件系统5—查看文件内容命令
Linux文件系统5-查看文件内容命令 cat: 由第一行开始显示文件内容 more: 一页一页地显示文件内容,空格键可以继续翻页显示下一页内容 less:与more类似,但是可以往前翻页 head: ...
- 爬虫代码实现六-Queue队列实现循环抓取
StartDSJCount : package com.dajiangtai.djt_spider.start; import java.util.List;import java.util.Queu ...
- PHP实现人脸识别技术
这次人脸识别技术,是实现在微信端的,也就是说利用公众微信平台,调用第三的API来实现人脸识别这项技术的. 实现的思路: 首先呢,将收集的照片,建立一个照片库,然后利用在微信平台发送的照片,去到照片库进 ...