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" ,按照 ...
随机推荐
- 福建工程学院第十四届ACM校赛J题题解
第六集,想不到你这个浓眉大眼的都叛变革命了 题意: 给你两个只包含01的字符串S和T,问你在允许一次错误的情况下,T是否能成为S的子串 思路: 这个问题的解法挺多,我是用fft匹配的,也比较简单,针对 ...
- centos配置postfix邮件服务
1.环境初始化 [root@mail ~]# rpm -q centos-release //查看系统版本 centos-release-7-5.1804.el7.centos.x86_64 [roo ...
- sqlserver2016 management tool v18
安装完sql server 2016 sp1版本后再安装管理工具v18版本,启动管理工具,启动不起来,自动退出了,没有任何反应. 解决该问题方案: 找到Microsoft.VisualStudio.S ...
- HTML 5的革新之一:语义化标签一节元素标签。
摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...
- docker 入门(2)
1,多容器环境 运行docker容器 进入容器并查看该容器的IP exit退出容器 运行超小的linux的docker镜像alpine 可以看到如果没有提前把镜像pull到本地,直接run的话,它会自 ...
- 利用mybatis-generator自动生成代码(转)
利用mybatis-generator自动生成代码 mybatis-generator有三种用法:命令行.eclipse插件.maven插件.个人觉得maven插件最方便,可以在eclipse/int ...
- 第二篇.1、python基础之数据类型与变量
一.变量 1 什么是变量之声明变量 #变量名=变量值 age=18 gender1='male' gender2='female' 2 为什么要有变量 变量作用:“变”=>变化,“量”=> ...
- tensorflow源码分析
前言: 一般来说,如果安装tensorflow主要目的是为了调试些小程序的话,只要下载相应的包,然后,直接使用pip install tensorflow即可. 但有时我们需要将Tensorflow的 ...
- c++ 实时通信系统(c++socket篇)
在上一篇简单的介绍了TCP/IP协议,在这一篇我们主要介绍socket的具体实现的函数 第一步首先我们套添加上头文件:(#pragma comment(lib, "WS2_32") ...
- 01-spring框架——spring概述
Spring 是于 2003 年兴起的一个轻量级的 Java 开发框架,它是为了解决企业应用开发的复杂性而创建的.Spring 的核心是控制反转(IoC)和面向切面编程(AOP).Spring 是可以 ...