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

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

 

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

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

需要用到以下两个方法：

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

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

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

  1. <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. 读书笔记 - js高级程序设计 - 第七章 函数表达式

      闭包 有权访问另一个函数作用域中的变量的函数 匿名函数 函数没有名字 少用闭包 由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存.过度使用闭包可能会导致内存占用过多,我们建议读者 ...

  2. 新iPhone上市会让富士康迎来新一轮的“用工荒”吗？

    新iPhone上市,在接下来的几个月内,中国制造会迎来一段非常忙碌或者说忙乱的日子,之所以说忙碌,是在于苹果的订单量常常大得吓人,而之所以说忙乱,则在于连同富士康.和硕.绿点科技等制造业巨头都可能遭遇 ...

  3. LVS DR模式搭建、keepalived+LVS搭建介绍

    参考文献 http://blog.51cto.com/taoxie/2066993 疑问: 1.为什么要修改RealServer的返回arp响应和发送arp请求参数  echo "1&quo ...

  4. aliyun服务器lamp配置

    1.安装Apache:yum install httpd 2.安装php: yum install php 3.安装mysql客户端:yum install mysql 4.安装mysql服务端:yu ...

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

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

  6. UVA 11404 简单LCS模型DP 字典序比较

    这个题目求某个字符串中含的最长的回文子串. 就是一个很简单的LCS模型吗,而且我不明白为什么网上这么多人都说仿照某写法把字符串先逆序一下,然后求LCS,我只想问一下,有必要吗? 直接按LCS的套路来就 ...

  7. 吴裕雄--天生自然MySQL学习笔记：MySQL ALTER命令

    需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. root@host# mysql -u root -p password; Enter password:******* ...

  8. 吴裕雄--天生自然 JAVASCRIPT开发学习： DOM 事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. iTOP-4412-Ubuntu系统源码-ubuntu没有声音的解决办法

    准备工作 1.下载 vim 在命令行上输入 apt-get install vim 下载 vim 2.输入 vim /etc/hosts 在所打开界面的第一行最后写上 iTOP4412-ubuntu- ...

  10. Ambiguous HTTP method Actions require an explicit HttpMethod binding for Swagger 2.0 异常

    网上看了很多关于此异常的解决方案,但是大多数都是不能用的,今天把正确的解决方案记录下来,以帮助需要的人 问题:有些接口没有设置HttpPost或HttpGet,非接口设置访问权限为private,控制 ...