input(移动端iOS)输入内容时调用软件盘后页面底部留白问题
iOS/input输入框调用软键盘底部留白
只需input输入框失去焦点时,让页面自动下移即可恢复
<input placeholder="请输入用户名" v-model="form.account" @blur.native.capture="blurchange"></input>
blurchange () {
let currentPosition = ''
let timer = ''
let speed = 1 // 页面滚动距离
timer = setInterval(function () {
currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= speed
window.scrollTo(0, currentPosition) // 页面向上滚动
currentPosition += speed // speed变量
window.scrollTo(0, currentPosition) // 页面向下滚动
clearInterval(timer)
}, 1)
}
在该代码基础上增加了一些简单逻辑,判断是否为ios系统和是否为微信6.7.4版本。
代码:
var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
var wechatVersion = wechatInfo[1]
var u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(wechatVersion=='6.7.4'&&!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
...代码逻辑
}
原文链接:https://blog.csdn.net/weixin_42992083/article/details/85236214?id=1
参考链接:https://juejin.im/post/5c07442f51882528c4469769
input(移动端iOS)输入内容时调用软件盘后页面底部留白问题的更多相关文章
- IE去掉input的type=”text”输入内容时出现的X和type=”password”出现的眼睛图标
从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...
- IE10去掉input的type=”text”输入内容时出现的小叉号(X)和type=”password”出现的小眼睛图标
最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...
- h5页面ios键盘弹出收起后页面底部留白问题
<input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...
- input输入内容时放大问题
最近做的微信网站有一个关于input输入框页面放大的问题.比如登录页面刚打开时正常,但用户输入信息登录时,页面就会放大.解决这个问题,首先需要在头部加一个 <meta name="vi ...
- 控制HTML的input控件的输入内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- 微信中关闭网页输入内容时的安全提示 [干掉 “防盗号或诈骗,请不要输入QQ密码”]
未设置之前: 需要把域名加入白名单 设置方法:微信公共平台后台-->公众号设置--->功能设置--->填写业务域名即可.
- Ace-editor 输入内容时光标闪动,定位错乱的解决方案
请尝试将字体设置成12PX或者14px(偶数),避免设置成13px. 应该就可以解决. 同时向大家推荐一款可直接生成文档的API调试.管理工具(中文PostMAN):https://www.apipo ...
- footer部分,当页面主题内容不满一屏时,始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...
- 解决位于底端Edittext 输入时被软盘遮盖
遇到这种情况我们首先到网上搜一圈,大概情况是需要设置<activity/> android:windowSoftInputMode="adjustResize" ,按照 ...
随机推荐
- Linux-1.1root初始密码设置,切换root用户
Ubuntu安装好后,root密码需要自己设置 root初始密码设置 sudo passwd root 权限不够时,切换root su 回车后输入密码 exit 退出登录的账户
- JS数据结构的栈和队列操作
数据结构:列表.栈.队列.链表.字典.散列.图和二叉查找树! 排序算法:冒牌.选择.插入.希尔.归并和快速! 查找算法:顺序查找和二分查找 在平时工作中,对数组的操作很是平常,它提供了很多方法使用,比 ...
- loj 2336「JOI 2017 Final」绳
loj 首先,所有位置最多被染色一次,因为要染多次的话,还不如一开始就染成最终的颜色.并且你可以一开始就染好色 因为最终长度为2,那么如果染完后这个序列可以被折完,那么首先最多只有两种颜色,还有就是要 ...
- 关于redis的几件小事(三)redis的数据类型与使用场景
1.string 这是最基本的类型了,就是普通的set和get,做简单的kv缓存. 2.hash 这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象没嵌套其他的对 ...
- CSDN添加文章目录
在发表的文章中,系统根据文章中H1到H6标签自动生成文章目录. 一.发表文章的时候合理使用“标题”标签. 二.目录生成.只要在文章中使用了“标题1”这样的功能,就可以在博文开头看到文章的目录.
- 06 Python之列表和元组
1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作 添加: 1 ...
- MySQL--高性能MySQL笔记二
人们通常使用varchar(15):来存储IP地址,然而它们其实是32位无符号整数,不是字符串,所以应该使用无符号整数存储IP地址,MySQL 提供 INET_ATON() 和 INET_NTOA() ...
- 免费FQ工具
这里使用免费的`梯子` 下载赛风 选择Windows下载 下载好之后,直接点击打开,它会自动连接,什么也不要设置,下载的就是一个exe文件,连接成功会打开一个网页,不用管
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- Linux内核链表深度分析
链表简介:链表是一种常用的数据结构,它通过指针将一系列数据节点连接成一条数据链.相对于数组,链表具有更好的动态性,建立链表时无需预先知道数据总量,可以随机分配空间,可以高效地在链表中的任意位置实时插入 ...