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)输入内容时调用软件盘后页面底部留白问题的更多相关文章

  1. IE去掉input的type=”text”输入内容时出现的X和type=”password”出现的眼睛图标

    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...

  2. IE10去掉input的type=”text”输入内容时出现的小叉号(X)和type=”password”出现的小眼睛图标

    最近在做一个后台管理系统项目,遇到以下两个问题: 1.从IE 10开始,type="text" 的 input 在用户输入内容后,会自动产生一个小叉号(X),方便用户点击清除已经输 ...

  3. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  4. input输入内容时放大问题

    最近做的微信网站有一个关于input输入框页面放大的问题.比如登录页面刚打开时正常,但用户输入信息登录时,页面就会放大.解决这个问题,首先需要在头部加一个 <meta name="vi ...

  5. 控制HTML的input控件的输入内容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  6. 微信中关闭网页输入内容时的安全提示 [干掉 “防盗号或诈骗,请不要输入QQ密码”]

    未设置之前: 需要把域名加入白名单 设置方法:微信公共平台后台-->公众号设置--->功能设置--->填写业务域名即可.

  7. Ace-editor 输入内容时光标闪动,定位错乱的解决方案

    请尝试将字体设置成12PX或者14px(偶数),避免设置成13px. 应该就可以解决. 同时向大家推荐一款可直接生成文档的API调试.管理工具(中文PostMAN):https://www.apipo ...

  8. footer部分,当页面主题内容不满一屏时,始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  9. 解决位于底端Edittext 输入时被软盘遮盖

    遇到这种情况我们首先到网上搜一圈,大概情况是需要设置<activity/> android:windowSoftInputMode="adjustResize" ,按照 ...

随机推荐

  1. 基于MatConvNet的CNN图像搜索引擎PicSearch

    简介 Picsearch是一种基于卷积神经网络特征的图像搜索引擎. Github:https://github.com/willard-yuan/CNN-for-Image-Retrieval Web ...

  2. 安装Python环境

    首先我们来安装Python,Python3.5+以上即可 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图 ...

  3. Spring Boot全局支持CORS(跨源请求)

    import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...

  4. Gsview裁剪EPS文件

    (1)菜单栏  “options--show bounding boxs”  选中. (2)打开eps图,然后File->PS TO EPS,不选择Automatically calculate ...

  5. 01 Redis基础

    NoSQL 学名(not only sql) 特点: 存储结构与mysql这一种关系型数据库完全不同,nosql存储的是KV形式 nosql有很多产品,都有自己的api和语法,以及业务场景 产品种类: ...

  6. html2canvas+Canvas2Image分享海报功能踩坑

    首先需要 import html2canvas from 'html2canvas'; import {Canvas2Image} from '../../assets/js/plug/canvas2 ...

  7. dubbo学习笔记四(异步调用)

    相关资料 官方文档 项目结构 代码示例 [EchoTestApp] @RestController @SpringBootApplication @ImportResource("class ...

  8. Eclipse集成spring-tool-suite(STS)

    1.官方下载 sts是spring官方在eclipse基础上加了很多插件之后封装的开发工具.sts与eclipse完全一样,但是多了很多插件,比如maven,使用起来更加方便.如果使用eclipse自 ...

  9. wordcloud:让你的词语变成黑云

    介绍 对文本中出现频率较高的关键词给予视觉化的显示 使用 import jieba import codecs import wordcloud file = r"C:\Users\Admi ...

  10. BLE 5协议栈-物理层

    文章转载自:http://www.sunyouqun.com/2017/04/page/4/ 1. 简介 物理层(Physical Layer)是BLE协议栈最底层,它规定了BLE通信的基础射频参数, ...