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. java执行bat代码

    java执行bat代码.txt public static void runbat(String path,String filename) { String cmd = "cmd /c s ...

  2. ListVie的用法

    1.在布局中放入一个listView <ListView android:id="@+id/list_view" android:layout_width="mat ...

  3. Mysql学习(一)之简单介绍

    数据库简介 数据库分类 关系型数据库:MySQL.Oracle.SQLServer.Access.db2.fox pro 文件型数据库:sqlite.mongodb 空间型数据库: 数据库分为两端 数 ...

  4. Action注入错误

    2016-07-13 13:52:09,584 [ERROR]-[com.opensymphony.xwork2.util.logging.commons.CommonsLogger:38] Exce ...

  5. C语言字符串函数总结

    原文链接 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例: #include <s ...

  6. 多线程编程-- part5.1 互斥锁之公平锁-释放锁

    释放公平锁 1.unlock() unlock()在ReentrantLock.java中实现的,源码如下: public void unlock() { sync.release(1); } 说明: ...

  7. 多线程编程-- part5.1 互斥锁之公平锁-获取锁

    基本概念 1.AQS:AbstractQueuedSynchronizer类 AQS是java中管理“锁”的抽象类,锁的许多公共方法都是在这个类中实现.AQS是独占锁(例如,ReentrantLock ...

  8. shell判断文件,目录是否存在或者具有权限

    shell判断文件,目录是否存在或者具有权限  #!/bin/sh  myPath="/var/log/httpd/"  myFile="/var /log/httpd/ ...

  9. 多线程与UI操作(一)

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它. 此时它将会在内部调用n ...

  10. Java注解demo

    # 为了熟悉了解注解,写的一个小demo# demo的主要功能是扫描一个class中的包含我们自定义注解的方法,然后把他们的返回值放到一个map中 public class QQ { public s ...