转自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. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  2. 201712-1 最小差值 Java

    思路: 也可以不排序,最后用abs就行 import java.util.Arrays; import java.util.Scanner; public class Main { public st ...

  3. SQL注入——报错注入

    0x00 背景 SQL注入长期位于OWASP TOP10 榜首,对Web 安全有着很大的影响,黑客们往往在注入过程中根据错误回显进行判断,但是现在非常多的Web程序没有正常的错误回显,这样就需要我们利 ...

  4. cuda addressMode解析

    cudaAddressModeClamp:超出范围就用边界值代替,示意: AA | ABCDE | EE cudaAddressModeBorder:超出范围就用零代替,示意: 00 | ABCDE ...

  5. JavaScript数组打平(4种方法)

    let arr = [1, 2, [3, 4, 5, [6, 7, 8], 9], 10, [11, 12]]; flatten1 = arr => arr.flat(Infinity) fla ...

  6. RedHat6.5升级内核

    redhat6.5 升级内核 1.导入key rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 2.安装elrepo的yum源 rp ...

  7. RedHat无法使用yum源问题

    RedHat下的yum是需要注册才能使用的 使用的话会提示: [root@test ~]# yum clean all Loaded plugins: product-id, refresh-pack ...

  8. UVA 10806 最小费用最大流

    终于可以写这道题的题解了,昨天下午纠结我一下下午,晚上才照着人家的题解敲出来,今天上午又干坐着想了两个小时,才弄明白这个问题. 题意很简单,给出一个无向图,要求从1 到 n最短路两次,但是两次不允许经 ...

  9. 题解 P2016 【战略游戏】

    题目 解法跟 dalao @real_ljs 类似,但没有用到递归 [分析] 题目相当于需要求覆盖这颗树需要的最小点数 用 \(Dp_{i,0/1}\) 表示在这棵树中,以 \(i\) 为根节点的子树 ...

  10. PAT Basic 1075 链表元素分类(25) [链表]

    题目 给定⼀个单链表,请编写程序将链表元素进⾏分类排列,使得所有负值元素都排在⾮负值元素的前⾯,⽽[0, K]区间内的元素都排在⼤于K的元素前⾯.但每⼀类内部元素的顺序是不能改变的.例如:给定链表为 ...