mui弹出输入法遮住input表单元素
转自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表单元素的更多相关文章
- 自定义常用input表单元素三:纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- fastadmin: layer.open 弹出层如何在表单提交之后自动关闭?
需要在控制器对应的js文件中添加 Form.api.bindevent($("form[role=form]")); define(['jquery', 'bootstrap' ...
- input表单元素的默认padding不一致问题
最近做的项目,发现一堆问题,input type=“text”和type=“button” (1)在无文字的时候高度是一致的,分别写入相同大小的文字type=“button”高度>type=“t ...
- 自定义常用input表单元素二:纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 自定义常用input表单元素一:纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- .net网站开发(一):1.input表单元素
其实,在半年前我对网站开发还是完全不感冒的,不是没认识,而是只认识到表面.我以为网站模型就那几样,新闻.论坛.博客啥的,仿个站出来有什么意思?但现在我是知道了,大多应用开发还是采用B/S架构的,包括服 ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- IOS微信点击input弹出输入法,关闭后页面留白解决方案
场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局 解决方法: 给input添加 ...
随机推荐
- 高级数据类型(arrary、slice、map、ptr)
高级数据类型: 高级数据类型有数组.切片.map.指针.结构体.函数.接口.通道等,本文只介绍Arrary.Slice.map.ptr. 数组: (1)概念: 数组是同一种数据类型的集合.数组从声明时 ...
- 1.softmax初探
1.softmax初探在机器学习尤其是深度学习中,softmax是个非常常用而且比较重要的函数,尤其在多分类的场景中使用广泛.他把一些输入映射为0-1之间的实数,并且归一化保证和为1,因此多分类的概率 ...
- Arduino IIC 主从设备连接通信
目的: 实现Arduino主从设备之间的互相IIC通信,掌握IIC通信协议的使用方法. 器材: Arduino UNO R3 一块 Arduino Nano 三块 面包板 导线 3K ...
- SpringCloud----服务注册中心Eureka
Eureka是Netflix开源的一个RESTful服务,主要用于服务的注册发现.Eureka由两个组件组成:Eureka服务器和Eureka客户端.Eureka服务器用作服务注册服务器.Eureka ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL 导入数据
1.mysql 命令导入 使用 mysql 命令导入语法格式为: mysql -u用户名 -p密码 < 要导入的数据库数据(runoob.sql) 实例: # mysql -uroot -p12 ...
- [题解] 洛谷P3950 部落冲突
传送门 拿到题目,一看 裸LCT (其实是我懒得打,splay又臭又长) 首先,这道题的意思就是删掉一些边 所以常规操作 点权转边权 之后对于战争操作,在对应的边上+1 对于和平操作,在对应的边上-1 ...
- 将微服务注册到Euraka
1.添加依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId> ...
- 2. laravel 5.5 学习 过程中 遇到问题 的 链接
关于 laravel 5.5 的文档 网络上已经太多 就不些太多重复的话了 在以后的 工作 中遇到问题的 查询到的解决方案 或者 相关文档将会具体写在这里 laravel 5.5 中文文档 https ...
- h5-边框图片
1.边框图片详解 <style> *{ ; ; } div{ width: 900px; height: 900px; margin: 100px auto; border: 133px ...
- sklearn 模型评估
原文链接 http://d0evi1.com/sklearn/model_evaluation/ 预测值:pred 真实值:y_test #### 直接用平均值 ``` mean(pred == y_ ...