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" ,按照 ...
随机推荐
- Fluent API
fluent api用于onmodelcreating里,可以实现比attribute更强更灵活的配置 public partial class StoreDBContext : DbContext ...
- Dubbo架构
原文链接http://dubbo.apache.org 架构图 节点角色说明 节点 角色说明 Provider 暴露服务的服务提供方 Consumer 调用远程服务的服务消费方 Registry 服务 ...
- 将Abp的UnitTest中的InMemory改为SQLite in memory
添加nuget包 Microsoft.EntityFrameworkCore.Sqlite 添加ServiceCollectionRegistrarSqlite public static class ...
- vs nuget找不到包
nuget.org https://api.nuget.org/v3/index.json
- PyTorch安装问题解决
现在caffe2被合并到了PyTorch中 git clone https://github.com/pytorch/pytorch pip install -r requirements.txtsu ...
- JS常用自定义函数总结
JS常用自定义函数总结 1.原生JavaScript实现字符串长度截取 2.原生JavaScript获取域名主机 3.原生JavaScript清除空格 4.原生JavaScript替换全部 5.原 ...
- AES加密解密 Java中运用
AES全称 Advanced Encryption Standard, 高级加密算法,更加安全,可取代DES. Aes: package com.blog.d201706.encrypt; impor ...
- 从FBV到CBV三(权限)
丛FBC到CBV三(权限) span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0 ...
- linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法
使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下: chkconfig --list 可能输出如下: network 0:off 1:o ...
- 全面解析Java日期时间API
时区 GMT(Greenwich Mean Time):格林尼治时间,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时(也就是在格林尼治上空最高点时)的时间. UTC(Universal Time ...