H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位。
解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效,
//blur失去焦点事件
$("input,select,textarea").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || ;
window.scrollTo(, Math.max(scrollHeight - , ));
}, );
})
注:scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位的更多相关文章
- ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){ setTimeout(() => { co ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头
业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如何干掉呢? <input read ...
- ios下input获取焦点以及在软键盘的上面
<!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- h5 input失去焦点软键盘把页面顶起
var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...
- HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...
随机推荐
- Python3 tkinter基础 Entry validate isdigit 只能输入数字的输入框
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Restful framework【第四篇】视图组件
基本使用 -view的封装过程有空可以看一下 -ViewSetMixin # ViewSetMixin 写在前面,先找ViewSetMixin的as_view方法 # 用了ViewSetMixin , ...
- 用vim + xdebug 来追踪thinkphp的执行过程
tree命令的使用几个有实际应用的参数 -a 这是默认的 -d: 只显式目录, 不需要显式目录下的文件 -L: 列出显式的深度. 当前目录下的所有东西为第一级... 在tp下, 有多个Common但是 ...
- 彻底地/ 终于地, 解决 关于apache 权限的问题了:: 修改 DocumentRoot后的 403错误: have no permission to access / on this server
目录的权限都 应该设置 为 drwxr_xr_x, 即755, 而html下的文件的权限设置为; 644 即可! -x 只有目标文件对某些用户是可执行的或该目标文件是目录时才追加x 属性. -w权限, ...
- Golang初练手-多线程网站路径爆破
以前用Python写过这个工具,前两天看了golang的基础,就想着用这个语言把这个工具重写一遍 先放张图 用法 Example : Buster.exe -u=https://www.baidu.c ...
- 用spring tool suite插件创建spring boot项目时报An internal error occurred during: "Building UI model". com/google/common/
本文为博主原创,未经允许不得转载 在用spring tool suite创建spring boot项目时,报一下异常: 查阅很多资料之后发现是因为装的spring tool suite的版本与ecli ...
- IIS客户端没有权限
运行CMDicacls c:\ /setintegritylevel M
- R语言通过loess去除某个变量对数据的影响--CNV分析
当我们想研究不同sample的某个变量A之间的差异时,往往会因为其它一些变量B对该变量的固有影响,而影响不同sample变量A的比较,这个时候需要对sample变量A进行标准化之后才能进行比较.标准化 ...
- linux例行性任务(定时作业)
linux定时作业(例行性任务) linux有两种定时作业方式: • at : 这个工作仅执行一次就从 Linux 系统中的排程中取消: • cron : 这个工作将持续例行性的作下去! at仅执行一 ...
- Vim 8.0
安装Vim 8.0yum install ncurses-devel wget https://github.com/vim/vim/archive/master.zip unzip master.z ...