IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题!
1、页面没有点击底部input的初始状态
2、安卓手机下的样子,一切都是那么的正常,简直是完美。
3、ios手机下,就是这么任性,没有办法,完全挡着了,挡着了,挡着了...,必须把整个页面滑到最底下才能看见它,捉迷藏啊简直是。
不怕丢人的说,此问题遇见一年多了终于得到完美解决,更加精彩、更加狗血的是代码只有特么的一行!
请睁大眼睛看
- <script type="text/javascript">
- $("input").on("click", function() {
- setTimeout(function(){
- document.body.scrollTop = document.body.scrollHeight;
- },300);
- })
- </script>
具体现实效果,我就不截图显示了,惊喜得自己发现、试过才知道,是不?
IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input的更多相关文章
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- 小程序input输入框获取焦点时,文字会出现闪动
最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...
- 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题
使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:
- 【原创】修复ios输入框获取焦点时不支持fixed的bug
前些日子,做了一个手机站的项目,有一个页面是这样的, 有一个固定(position:fixed)的头部和底部导航,中间是一些表单内容,没啥特别的.但是到了ios中,正常滚动页面没有问题,一旦触发了文本 ...
- 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
随机推荐
- C# 中直接调用js方法
请注意,我这段代码中实现js方法中有 funcName(argument) 这种一个入参的调用. using System; namespace game2_36.Common { public cl ...
- System.load 与 System.loadLibrary 的使用
相同点 它们都可以用来装载库文件,不论是JNI库文件还是非JNI库文件. 在任何本地方法被调用之前必须先用这个两个方法之一把相应的JNI库文件装载. System.load System.load 参 ...
- Bitwise And Queries
Bitwise And Queries Time limit: 1500 msMemory limit: 128 MB You are given QQ queries of the form a\ ...
- Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)(转)
This semester I'm teaching from Hastie, Tibshirani, and Friedman's book, The Elements of Statistical ...
- stm之SPI通信协议
SPI (Serial Peripheral interface),顾名思义就是串行外围设备接口.SPI是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管脚,同时为P ...
- nodeJS之路径PATH模块
前面的话 path模块包含一系列处理和转换文件路径的工具集,通过 require('path') 可用来访问这个模块.本文将详细介绍path模块 路径组成 [path.dirname(p)] 返回路径 ...
- R中用黏贴板读取excel数据以及用R生成人名
本人尚在超级菜鸟级别,中间有些代码写的很low,请不要见笑! 1.今天先跟大家分享一个小技巧,用黏贴板将excel中的数据读进R 首先选中要读入R的数据 如图,上面是我分析的病人相关资料,Ctrol+ ...
- OpenGL教程(0)——介绍
OpenGL介绍 OpenGL,全称Open Graphics Library,是一个用C语言写的图形API.通俗地说,OpenGL用来绘制2D/3D图形.目前OpenGL的运用十分广泛,有许多用Op ...
- Windows下用Composer引入官方GitHub扩展包
Windows下用Composer引入官方GitHub扩展包 1. 当你打开威武RC4版本的链接的时候,往下拉你可以看到这个,然后你要做的就是想到,百度Composer,看看是个什么鬼,别想太多,跟着 ...
- 多线程异步编程示例和实践-Thread和ThreadPool
说到多线程异步编程,总会说起Thread.ThreadPool.Task.TPL这一系列的技术.总结整理了一版编程示例和实践,分享给大家. 先从Thread和ThreadPool说起: 1. 创建并启 ...