转自https://www.cnblogs.com/devilyouwei/p/6293190.html

mui弹出输入法遮住input表单元素

 

问题如下：当我用mui开发app时，在mui-scroll下的表单元素，input元素点击后会被弹出的输入法遮挡，体验效果下降！

百度了一番后没有找到合适的方法，于是自行研究了一下

需要用到以下两个方法：

1.onresize //检测窗口的变化

2.scrollIntoView() //滚动到可视范围内

直接在body中添加即可，代码如下：

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

这样在弹出输入法就不会遮住input了，自动滚动到焦点处

mui弹出输入法遮住input表单元素的更多相关文章

  1. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  2. fastadmin: layer.open 弹出层如何在表单提交之后自动关闭？

    需要在控制器对应的js文件中添加   Form.api.bindevent($("form[role=form]")); define(['jquery', 'bootstrap' ...

  3. input表单元素的默认padding不一致问题

    最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...

  4. 自定义常用input表单元素二：纯css实现自定义radio单选按钮

    这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...

  5. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  6. .net网站开发（一）：1.input表单元素

    其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...

  7. html表单元素及表单元素详解

    原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...

  8. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

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

    场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局             解决方法: 给input添加 ...

随机推荐

  1. mybatis的插入数据后的主键获取

    为什么要在插入数据后获取主键:当有一个订单表和订单详情表,当插入订单表的数据后,需要在订单详情表插入该订单的具体购物情况,订单详情表需要的一个列是订单表的主键或者订单ID.(通俗讲:A表的主键是B表的 ...

  2. BZOJ 4855 [Jsoi2016]轻重路径

    题解:用树链剖分来维护树链剖分 令d[x]=size[heavyson[x]]-size[lightson[x]] 当d[x]<0时轻重儿子关系改变 用数据结构维护d[x]并找到这些位置改变即可 ...

  3. HTTPS（身披SSL协议的HTTP）

    参考链接: HTTP 与 HTTPS 的区别 HTTPS科普扫盲帖 HTTPS小结 HTTP 和 HTTPS 区别 HTTP是明文传输未加密,安全性差,HTTPS(HTTP + SSL)数据传输是加密 ...

  4. POJ-1733 Parity game（带权并查集区间合并）

    http://poj.org/problem?id=1733 题目描述 你和你的朋友玩一个游戏.你的朋友写下来一连串的0或者1.你选择一个连续的子序列然后问他,这个子序列包含1的个数是奇数还是偶数.你 ...

  5. da道至简读后感

    大道至简,衍化至繁. 往往特别深奥的事却是从特别简洁的发展而成的,就像麦克斯韦仅仅凭一个方程组就统一了电磁学一样,物理学中的算式往往非常简练.开普勒计算天体运行的时候是遵循老师认同的地心说计算的,结果 ...

  6. Neo4j图形数据库备份

    Neo4j图形数据库备份 backup.sh文件 nowtime=`date +"%Y-%m-%d_%H_%M"` #原文件路径 sourcepath='/home/neo4j/n ...

  7. Jetson TX2入门学习之Ubuntu默认密码

    在使用TX2开发板时进行软件更新时需要身份验证,TX2默认有两个登录身份,一个是ubuntu 一个是nvidia 登录其中的哪一个都可以更新   两个身份的密码和登录名是一样的用户:ubuntu 密码 ...

  8. Vue.js——1.初识Vue

    初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...

  9. 38. docker cloud 简介及 关联 git hub

    1.概念 提供 容器的管理, 编排, 部署 的托管服务 2.功能 image 管理 创建 stack 创建服务 service 添加 节点 作为 docker host 自动关联云服务商 AWS  A ...

  10. 2019牛客网暑假多校训练第四场 K —number

    链接:https://ac.nowcoder.com/acm/contest/884/K来源:牛客网 题目描述 300iq loves numbers who are multiple of 300. ...