IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

时间:2023-01-07 00:06:49

移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题!

1、页面没有点击底部input的初始状态

IOS  固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

2、安卓手机下的样子,一切都是那么的正常,简直是完美。

IOS  固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

3、ios手机下,就是这么任性,没有办法,完全挡着了,挡着了,挡着了...,必须把整个页面滑到最底下才能看见它,捉迷藏啊简直是。

IOS  固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

不怕丢人的说,此问题遇见一年多了终于得到完美解决,更加精彩、更加狗血的是代码只有特么的一行!

请睁大眼睛看

<script type="text/javascript">
$("input").on("click", function() {
setTimeout(function(){
document.body.scrollTop = document.body.scrollHeight;
},300);
})
</script>

具体现实效果,我就不截图显示了,惊喜得自己发现、试过才知道,是不? 

IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input的更多相关文章

  1. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  2. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  3. 小程序input输入框获取焦点时,文字会出现闪动

    最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...

  4. 【原创】修复ios输入框获取焦点时不支持fixed的bug

    前些日子,做了一个手机站的项目,有一个页面是这样的, 有一个固定(position:fixed)的头部和底部导航,中间是一些表单内容,没啥特别的.但是到了ios中,正常滚动页面没有问题,一旦触发了文本 ...

  5. 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  6. 移动端H5页面&lowbar;input获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  7. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  8. Android定位&amp&semi;地图&amp&semi;导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

  9. Visual Studio2012打开时弹出&OpenCurlyDoubleQuote;遇到异常:这可能是由某个扩展导致的”错误的解决办法

    Visual Studio2012打开时弹出"遇到异常:这可能是由某个扩展导致的"错误的解决办法: 具体问题如下: 分析原因:网上搜集了以下,出现异常的原因是安装了第三方控件,然后 ...

随机推荐

  1. 【工匠大道】svn使用总结

    原文地址 SVN(Subversion)是一个*.开源的项目源代码版本控制工具.目前,绝大多数开源软件和企业代码管理,都使用SVN作为代码版本管理软件. Subversion将文件存放在中心版本库里 ...

  2. XdbxAnalysis

    Tree: TXdbxAnalysis; FDataStream: TMemoryStream; {FDataStream:= TMemoryStream.Create;    FDataStream ...

  3. SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int

    --SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int --关键说明:--1.从系统表syscolumns中的查询所有xtype='48'的记录得到类型为[tinyint]的字段- ...

  4. POJ 2402 Palindrome Numbers

    题目链接 水题,LA我居然没找到在那里. #include <cstdio> #include <cstring> #include <string> #inclu ...

  5. s3c2440 移值新内核 linux-4&period;1&period;36

    arm-linuxgcc version 4.3.2 经过试验,最高可以编译到 linux-4.1.36 ,在高的版本会有错误 ,可能是 GCC 编译器版本较低造成. 解压比较麻烦还要装一个 xz x ...

  6. css关于宽度

    很多时候,我们指定了某个元素的宽度,浏览器渲染时却只给这个元素一半的宽度,这时可以试试min-width属性,该属性表示浏览器不能偷懒,资源再紧张也得分配min-width指定的宽度.

  7. sqlserver 学习

    http://www.cnblogs.com/CareySon/category/411344.html SQL Server查找的最小单位实际上是页.也就是说即使你只查找一行很小的数据,SQL Se ...

  8. win64安装及配置apache&plus;php&plus;mysql

    Windows是64位Win7,所以Apache.PHP和Mysql都选用的64位版本(最好是统一64位). Apache:httpd-2.4.7-win64.zip PHP:PHP-5.4.6-Wi ...

  9. 8、代理模式(Proxy)

    其实每个模式名称就表明了该模式的作用,代理模式就是多一个代理类出来,替原对象进行一些操作,比如我们在租房子的时候回去找中介,为什么呢?因为你对该地区房屋的信息掌握的不够全面,希望找一个更熟悉的人去帮你 ...

  10. RAC&plus;ASM 添加控制文件

    环境介绍:11g RAC 使用 ASM 磁盘组,控制文件只有一个,需要进行添加 参照 MOS 文档 How to Multiplex Control File In RAC Database (文档 ...