IOS11 底部输入框被手机输入法遮住
前言:
最近在做一个评论的功能,前端页面中输入评论框在页面的最底部,在ios11中手机的输入法会遮住那个输入框,在其它手机上正常。
一直在找有关的解决方案,虽然最终也没有解决,还是记录过程,供参考。
1,对输入框这个元素(如pannel)做操作
pannel.scrollIntoView(true);或者
pannel.scrollIntoView(true);
pannel.scrollIntoViewIfNeeded();
自己试了但没有什么效果。
2,scrolltop; window.scrollTo(0, value);手动上推
3,英文找了一篇有关的文章,解决方案如下:但是好像也没什么效果。
document.body.style.overflow = ‘hidden’;
document.body.style.height = ‘100%’;
document.body.style.width = ‘100%’;
if (osIsiOS()) {
document.body.style.position = ‘fixed’;
}
IOS11 底部输入框被手机输入法遮住的更多相关文章
- 移动端,input输入框被手机输入法解决方案
当界面元素靠下时候的时候,input输入框会被系统的键盘遮挡. 我们可以让界面向上移动一定距离去避免遮挡. $('#money').click(function(){ setTimeout(funct ...
- 移动前端手机输入法自带emoji表情字符处理
今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符.既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下 ...
- paip.android 手机输入法制造大法
paip.android 手机输入法制造大法 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...
- 【转】移动前端手机输入法自带emoji表情字符处理
http://blog.csdn.net/binjly/article/details/47321043 今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入 ...
- 记录移动端html界面中底部输入框触发焦点时键盘会把输入框遮挡的问题
//浏览器当前的高度 var oHeight = $(document).height(); //监听窗口大小的时候动态改变底部输入框控制器的定位 $(window).resize(functio ...
- baidu手机输入法:邂逅"吹神"的声场漫游
"十年,好久不见,兄妹,所有还好?年月如歌,你的背包.却仍然没有筛选.装满红玫瑰.人来人往,爱情搬运,纵使我成了K歌之王.也谢谢你.依然让我的全世界失眠. 孤单患者.不如不见,不要说 ...
- mui弹出输入法遮住input表单元素
转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素 问题如下:当我用mui开发app时,在mui-sc ...
- h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...
- mint fcitx搜狗输入法不显示输入框,其他输入法丢失皮肤
mint18.3 因为这个原因刚刚重装过,结果一不留神又这样了. 这次原因相对清晰: 双屏显示下,合屏睡眠,打开之后,发现卡死了.屏幕分辨率改变了似的. 然后再重启,发现输入法悬浮框变大了,然后输入法 ...
随机推荐
- CentOS7配置gradle,或配置maven
借鉴博客: https://www.cnblogs.com/imyalost/p/8746527.html 特简单,不多说了,自己看 1.下载gradle4.6版本:wget https://down ...
- 在JavaEE中使用Mybatis框架
MyBatis 使用简单的 XML 或注解用于配置和原始映射,将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java 对象)映射成数据库中的记录.每个MyB ...
- 你不知道的JavaScript——this词法
https://www.cnblogs.com/hutaoer/p/3423782.htmlhttps://www.cnblogs.com/vicky-li/p/8669549.htmlhttps:/ ...
- rem 自适应、整体缩放
html{ font-size: calc(100vw/7.5); } 说明: 100vw是设备的宽度,除以7.5可以让1rem的大小在iPhone6下等于100px. 若是低版本的设备不支持rem, ...
- 《笔记》Apache2 mod_wsgi的配置
接手了一台古老的服务器的还使用的是mod_wsgi,所以需要配置一下.其实这里有点怀念,记得当年自己折腾第一个app的时候,还是个什么都不懂的菜鸡.当时用django搜方案的时候,还不知道有uwsgi ...
- scrapy架构简介
一.scrapy架构介绍 1.结构简图: 主要组成部分:Spider(产出request,处理response),Pipeline,Downloader,Scheduler,Scrapy Engine ...
- vue自定义组件及传值
1.使用 Vue.component() 方法注册组件 2.使用 props 属性传递参数 v-for="item in items": 遍历 Vue 实例中定义的名为 items ...
- Lodop背景图无图片时显示放大叉号问题
正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...
- Spring Boot 构建电商基础秒杀项目 (十) 交易下单
SpringBoot构建电商基础秒杀项目 学习笔记 新建表 create table if not exists order_info ( id varchar(32) not null defaul ...
- 3、springframe常用注解
1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...