转自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. springboot自动装配介绍

    所谓的自动装配,就是 autowire. 如何激活自动装配呢? 方法一:@EnableAutoConfiguration或@SpringBootApplication,写在@Configuration ...

  2. Java查漏补缺（3）（面向对象相关）

    Java查漏补缺(3) 继承·抽象类·接口·静态·权限 相关 this与super关键字 this的作用: 调用成员变量(可以用来区分局部变量和成员变量) 调用本类其他成员方法 调用构造方法(需要在方 ...

  3. 关于Java中内省的总结

    内省基于JavaBean规范对反射进行了封装,提供了更加便捷的通过getter/setter方法来访问字段的方式 Java内省的知识结构图 JavaBean的规范 JavaBean在现在可以认为就是普 ...

  4. C语言之结构体概述

    C语言之结构体概述1.结构体类型是一种自定义类型(1)C语言中有2种类型:原生类型和自定义类型.2.结构体使用时先定义结构体类型再用类型定义变量(1)结构体定义时需要先定义结构体类型,再用类型来定义变 ...

  5. mysql建表语句和数据类型

    1.创建表的完整语法 create table 表名( 字段名称 数据类型[(长度) 约束条件], 字段名称 数据类型[(长度) 约束条件] )   必须的:字段名 数据类型 表名 可选的:长度 约束 ...

  6. CYPHER 语句(Neo4j)

    CYPHER 语句(Neo4j) 创建电影关系图 新增 查找 修改 删除 导入 格式转换 创建电影关系图 CREATE (TheMatrix:Movie {title:'The Matrix', re ...

  7. UML-包的设计

    1.准则 1).准则1 包在水平和垂直划分上,要功能性内聚.即:同类关联功能的模块化,将参与共同目的.服务.协作.策略和功能的强相关类型(类或者接口)组织在一起. 如:在NextGen项目中,Pric ...

  8. 明明办理的是100M光纤，为何经过路由器输出只有20M？

    就在今年7月26日,宽带发展联盟发布了第20期<中国宽带速率状况报告>(2018年第二季度).报告显示,2018年第二季度我国固定宽带网络平均下载速率达到21.31Mbps,比去年第二季度 ...

  9. XML技术详解

    XML 1.XML概述 XML可扩展标记语言是一种基于文本的语言用作应用程序之间的通信模式,是一个非常有用的描述结构化信息的技术.XML工具使得转化和处理数据变得十分容易,但同样也要领域相关的标准和代 ...

  10. What is the maximum length of a URL in different browsers?

    https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers ...