移动端 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样式，不然回滚会反弹

时间： 2024-11-07 08:19:22

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

mui框架中，当初始进入某个页面时候，数据没有加载出来显示有误

在mui框架中,初始化进入一个页面,js可能加载缓慢,数据使用vue的时候会显示{{****}},中间是你的值,会影响用户体验.可以先把数据部分隐藏,再展示出来 [v-cloak]{ display: none; } 原文地址:https://www.cnblogs.com/wuzhaoyu/p/12055740.html

关于angularjs框架中input按回车事件光标跳转到另一个input上

我们项目里用到angularjs 对应的包,没有ng-keypress\ng-keydown. 所以,我们自己写一些指令. 首先在,项目模块对应的module.js中写指令 define([ 'angular', 'angular-couch-potato', 'angular-ui-router', 'angular-resource' ], function (ng, couchPotato) { 'use strict'; var module = ng.module('app.handO

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

mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳转, 为了让我们通过触摸下面的导航之后,把相对应的子页面加载到首页的内容区在index.html 下写: 地不连接为 让为了让内容在首页窗体内显示,我们还需要写下面的代码: 这里要注意的是其他页面上要有内容不然看不出来,必须是真机测试才能看出效果

【ios h5踩坑】关于ios上嵌入h5导致input聚焦时页面自动放大问题

目录 问题描述 问题分析 解决方案 ? 问题描述 最近有一个项目需要给ios和安卓app开发h5页面,在安卓上测试没有问题,但是ios(iphone8)上点击输入框会导致页面缩放失败,但在iphone 8plus/x上不会产生这种问题.并且设置 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-

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

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

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

实现方式与之前写的jquery weui 下拉刷新和上拉加载功能有点相似,以下是实现过程! 后台返回的数据格式: 页面代码布局: <header id="header" class="mui-bar mui-bar-nav"> <h1 class="mui-title">订单列表</h1> <a class="mui-icon mui-pull-right iconfont icon-tuich

IOS微信点击input弹出输入法，关闭后页面留白解决方案

场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加blur(失去焦点)事件,让页面强制回滚,距离为0,代码如下 $("input").blur(function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; }); 原文出处:https://blo

移动端用js与jquery实时监听输入框值的改动

背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android和iOS都可以触发的keyDown和keyUp. 于是,百度出了新东西:oninput![需要配合propertychange,兼容 IE9 以下版本] 用法: JS: if(isIE) { document.getElementById("input").onpropertychange

MUI 框架微信支付

在MUI 框架中实现了支付宝支付后,以为MUI微信支付,也没什么大问题,结果这个问题困扰了我几天,后面再同事的提醒下终于弄出来了, 问题出在,开始使用Dcloud 公有证书 怎么也付不了....,后面改成自己就OK了....希望后来者看到此博,能节约一点时间. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" co